DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Árbol

Formularios

Este elemento ofrece la posibilidad de seleccionar una o varias opciones organizadas jerárquicamente.

Tree

Parámetros Nunjucks del componente: "Tree". Versión: 4.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: type\n  type: string\n  required: false\n  description: Type of input control to render. Admitted values are `navigation`, `checkbox` and `radio` or not set. Defaults to `radio`.\n- name: searchbar\n  type: component\n  required: false\n  description: A searchbar component to filter the items. Inherits all the searchbar component params.\n- name: ariaLabel\n  type: text\n  required: false\n  description: aria-label for nav tag. Should be a description of tree type navigation.\n- name: hasUnderline\n  type: boolean\n  required: false\n  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.\n- name: fieldset\n  type: object\n  required: false\n  description: Options for the fieldset component (e.g. legend).\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component (e.g. text).\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.\n  isComponent: true\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: idPrefix\n  type: string\n  required: false\n  description: String to prefix id for each item if no id is specified on each item.\n- name: name\n  type: string\n  required: true\n  description: Name attribute for all checkbox/radio items.\n- name: heading\n  type: object\n  required: true\n  description: Options for the heading\n  params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the heading.\n  - name: id\n    type: string\n    required: false\n    description: Specific id attribute for the component. If omitted, then idPrefix option will be applied.\n- name: headingLevel\n  type: number\n  required: false\n  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.\n- name: items\n  type: array\n  required: true\n  description: Array of tree items objects.\n  params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within each tree item label. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within each tree item label. If `html` is provided, the `text` argument will be ignored.\n  - name: href\n    type: string\n    required: false\n    description: Item link in tree type navigation.\n  - name: id\n    type: string\n    required: false\n    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.\n  - name: name\n    type: string\n    required: true\n    description: Specific name for the checkbox/radio item. If omitted, then component global `name` string will be applied.\n  - name: value\n    type: string\n    required: true\n    description: Value for the checkbox/radio input.\n  - name: label\n    type: object\n    required: false\n    description: Provide attributes and classes to each checkbox/radio item label.\n    isComponent: true\n  - name: hint\n    type: object\n    required: false\n    description: Provide hint to each checkbox/radio item.\n    isComponent: true\n  - name: checked\n    type: boolean\n    required: false\n    description: If true, checkbox/radio will be checked.\n  - name: isIndeterminate\n    type: boolean\n    required: false\n    description: If true, the checkbox will have an additional indeterminate state to show a partial true. Only for checkbox item.\n  - name: indeterminateChecked\n    type: boolean\n    required: false\n    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value. Only for checkbox item.\n  - name: disabled\n    type: boolean\n    required: false\n    description: If true, tree will be disabled.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the item.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the item.\n  - name: expanded\n    type: boolean\n    required: false\n    description: If true, tree sub will be expanded.\n  - name: sub\n    type: boolean\n    required: false\n    description: If true, content provided will be revealed when the item is expanded.\n  - name: sub.classes\n    type: string\n    required: false\n    description: Classes to add to the sub container.\n  - name: sub.attributes\n    type: string\n    required: false\n    description: HTML attributes (for example data attributes) to add to the sub container.\n  - name: sub.items\n    type: array\n    required: false\n    description: Provide subitems for the sub reveal. Each items have same params as this item.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the tree container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the tree container.\n","length":5980}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="default-example" role="tree" data-module="c-tree">
      <li id="default-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-example-item-1-input" name="por-defecto" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="default-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-1-0-input" name="por-defecto" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-1-1-input" name="por-defecto" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-1-2-input" name="por-defecto" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="default-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-example-item-2-input" name="por-defecto" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="default-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-2-0-input" name="por-defecto" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-2-1-input" name="por-defecto" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-2-2-input" name="por-defecto" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="default-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="default-example-item-3-input" name="por-defecto" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="default-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="default-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-3-0-input" name="por-defecto" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-3-1-input" name="por-defecto" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-default-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-default-example-item-3-2-input" name="por-defecto" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-default-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "por-defecto",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "default-example",
  "items": [
    {
      "text": "Item 1",
      "id": "default-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "default-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "default-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "por-defecto",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "default-example",
  "items": [
    {
      "text": "Item 1",
      "id": "default-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "default-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "default-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-3"
        }
      }
    }
  ]
}) }}

Tipo checkbox

Ejemplo: "Tipo checkbox", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="type-checkbox" role="tree" data-module="c-tree">
      <li id="type-checkbox-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-example-item-1-input" name="type-checkbox" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="type-checkbox-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-1-0-input" name="type-checkbox" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-1-1-input" name="type-checkbox" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-1-2-input" name="type-checkbox" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="type-checkbox-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-example-item-2-input" name="type-checkbox" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="type-checkbox-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-2-0-input" name="type-checkbox" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-2-1-input" name="type-checkbox" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-2-2-input" name="type-checkbox" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="type-checkbox-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="type-checkbox-example-item-3-input" name="type-checkbox" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="type-checkbox-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="type-checkbox-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-3-0-input" name="type-checkbox" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-3-1-input" name="type-checkbox" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-type-checkbox-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-type-checkbox-example-item-3-2-input" name="type-checkbox" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-type-checkbox-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Tipo checkbox", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "type-checkbox",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "type-checkbox",
  "items": [
    {
      "text": "Item 1",
      "id": "type-checkbox-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "type-checkbox-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "type-checkbox-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Tipo checkbox

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "type-checkbox",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "type-checkbox",
  "items": [
    {
      "text": "Item 1",
      "id": "type-checkbox-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "type-checkbox-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "type-checkbox-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "type-checkbox-example-item-3"
        }
      }
    }
  ]
}) }}

Tree navigation

Ejemplo: "Tree navigation", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <nav aria-label="Apartados de esta página">
    <ul class="c-tree mt-base" id="navigation-example" role="tree" data-tree-navigation data-module="c-tree">
      <li id="navigation-example-item-1" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="navigation-example-item-1-link" class="block px-xs">
                  Item 1
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-example-item-1">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-1-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-1-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-1-2" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <span id="sub-navigation-example-item-1-2-link" class="block px-xs">
                      Subitem 3
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-example-item-3">
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-example-item-1-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-example-item-1-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                        Subitem 1
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-example-item-1-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-example-item-1-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                        Subitem 2
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-example-item-1-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block font-bold" aria-current="page">
                  <div class="font-bold">
                    <div>
                      <div class="relative flex items-start py-xs">
                        <a id="sub-sub-navigation-example-item-1-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline" aria-current="page">
                          <strong class="font-bold">Subitem 3</strong>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="navigation-example-item-2" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="navigation-example-item-2-link" class="block px-xs">
                  Item 2
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-example-item-2">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="navigation-example-item-3" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="navigation-example-item-3-link" class="block px-xs">
                  Item 3
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-example-item-3">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-3-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-3-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-example-item-3-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<!-- /tree -->

Ejemplo: "Tree navigation", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-example",
  "ariaLabel": "Apartados de esta página",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "navigation-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "navigation-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-3"
        }
      }
    }
  ]
}) }}
Mostrar códigodel ejemplo: Tree navigation

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-example",
  "ariaLabel": "Apartados de esta página",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "navigation-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "navigation-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-example-item-3"
        }
      }
    }
  ]
}) }}

Tree navigation con hasunderline

Usa 'hasUnderline': true cuando tienes mezclados, items deshabilitados o sin href e items normales.

Ejemplo: "Tree navigation con hasunderline", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <nav aria-label="Apartados de esta página">
    <ul class="c-tree mt-base" id="navigation-hasunderline-example" role="tree" data-tree-navigation data-module="c-tree">
      <li id="navigation-hasunderline-example-item-1" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <a id="navigation-hasunderline-example-item-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                  Item 1
                </a>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-hasunderline-example-item-1">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-1-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-1-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline no-underline pointer-events-none" aria-disabled="true" tabindex="-1">
                    Subitem 2 deshabilitado o sin href
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-1-2" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <a id="sub-navigation-hasunderline-example-item-1-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                      Subitem 3
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-hasunderline-example-item-3">
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-hasunderline-example-item-1-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-hasunderline-example-item-1-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                        Subitem 1
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-hasunderline-example-item-1-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-hasunderline-example-item-1-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                        Subitem 2
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-hasunderline-example-item-1-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block font-bold" aria-current="page">
                  <div class="font-bold">
                    <div>
                      <div class="relative flex items-start py-xs">
                        <a id="sub-sub-navigation-hasunderline-example-item-1-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline" aria-current="page">
                          <strong class="font-bold">Subitem 3</strong>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="navigation-hasunderline-example-item-2" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="navigation-hasunderline-example-item-2-link" class="block px-xs">
                  Item 2 deshabilitado o sin href
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-hasunderline-example-item-2">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline no-underline pointer-events-none" aria-disabled="true" tabindex="-1">
                    Subitem 2 deshabilitado o sin href
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="navigation-hasunderline-example-item-3" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <a id="navigation-hasunderline-example-item-3-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                  Item 3
                </a>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-hasunderline-example-item-3">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-3-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-3-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-hasunderline-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-hasunderline-example-item-3-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<!-- /tree -->

Ejemplo: "Tree navigation con hasunderline", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav-hasunderline",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-hasunderline-example",
  "ariaLabel": "Apartados de esta página",
  "hasUnderline": "true",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-hasunderline-example-item-1",
      "href": "#",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2 deshabilitado o sin href",
            "href": "#",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-hasunderline-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-1"
        }
      }
    },
    {
      "text": "Item 2 deshabilitado o sin href",
      "id": "navigation-hasunderline-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2 deshabilitado o sin href",
            "href": "#",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "navigation-hasunderline-example-item-3",
      "href": "#",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-3"
        }
      }
    }
  ]
}) }}
Mostrar códigodel ejemplo: Tree navigation con hasunderline

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav-hasunderline",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-hasunderline-example",
  "ariaLabel": "Apartados de esta página",
  "hasUnderline": "true",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-hasunderline-example-item-1",
      "href": "#",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2 deshabilitado o sin href",
            "href": "#",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-hasunderline-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-1"
        }
      }
    },
    {
      "text": "Item 2 deshabilitado o sin href",
      "id": "navigation-hasunderline-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2 deshabilitado o sin href",
            "href": "#",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "navigation-hasunderline-example-item-3",
      "href": "#",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-hasunderline-example-item-3"
        }
      }
    }
  ]
}) }}

Usa el parámetro 'classes': 'c-link' en cada item para dar apariencia más visible de links.

Ejemplo: "Tree navigation link", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <nav aria-label="Apartados de esta página">
    <ul class="c-tree mt-base" id="navigation-link-example" role="tree" data-tree-navigation data-module="c-tree">
      <li id="navigation-link-example-item-1" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left c-link">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div class=" c-link">
              <div class="relative flex items-start py-xs">
                <span id="navigation-link-example-item-1-link" class="block px-xs c-link">
                  Item 1
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-link-example-item-1">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-1-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-1-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-1-2" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left c-link">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div class=" c-link">
                  <div class="relative flex items-start py-xs">
                    <span id="sub-navigation-link-example-item-1-2-link" class="block px-xs c-link">
                      Subitem 3
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-link-example-item-3">
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-link-example-item-1-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block c-link">
                  <div class=" c-link">
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-link-example-item-1-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                        Subitem 1
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-link-example-item-1-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block c-link">
                  <div class=" c-link">
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-navigation-link-example-item-1-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                        Subitem 2
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-navigation-link-example-item-1-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block c-link font-bold" aria-current="page">
                  <div class="font-bold">
                    <div class=" c-link">
                      <div class="relative flex items-start py-xs">
                        <a id="sub-sub-navigation-link-example-item-1-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline" aria-current="page">
                          <strong class="font-bold">Subitem 3</strong>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="navigation-link-example-item-2" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left c-link">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div class=" c-link">
              <div class="relative flex items-start py-xs">
                <span id="navigation-link-example-item-2-link" class="block px-xs c-link">
                  Item 2
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-link-example-item-2">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="navigation-link-example-item-3" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left c-link">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div class=" c-link">
              <div class="relative flex items-start py-xs">
                <span id="navigation-link-example-item-3-link" class="block px-xs c-link">
                  Item 3
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="navigation-link-example-item-3">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-3-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-3-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-navigation-link-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block c-link">
              <div class=" c-link">
                <div class="relative flex items-start py-xs">
                  <a id="sub-navigation-link-example-item-3-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black c-link hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<!-- /tree -->

Ejemplo: "Tree navigation link", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav-link",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-link-example",
  "ariaLabel": "Apartados de esta página",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-link-example-item-1",
      "classes": "c-link",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "classes": "c-link",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#",
                  "classes": "c-link"
                },
                {
                  "text": "Subitem 2",
                  "href": "#",
                  "classes": "c-link"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true,
                  "classes": "c-link"
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-link-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "classes": "c-link",
      "id": "navigation-link-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "classes": "c-link"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "classes": "c-link",
      "id": "navigation-link-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "classes": "c-link"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-3"
        }
      }
    }
  ]
}) }}
Mostrar códigodel ejemplo: Tree navigation link

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-nav-link",
  "classes": "mt-base",
  "type": "navigation",
  "idPrefix": "navigation-link-example",
  "ariaLabel": "Apartados de esta página",
  "items": [
    {
      "text": "Item 1",
      "id": "navigation-link-example-item-1",
      "classes": "c-link",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "classes": "c-link",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#",
                  "classes": "c-link"
                },
                {
                  "text": "Subitem 2",
                  "href": "#",
                  "classes": "c-link"
                },
                {
                  "text": "Subitem 3",
                  "href": "#",
                  "active": true,
                  "classes": "c-link"
                }
              ],
              "attributes": {
                "aria-labelledby": "navigation-link-example-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "classes": "c-link",
      "id": "navigation-link-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "classes": "c-link"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "classes": "c-link",
      "id": "navigation-link-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 2",
            "href": "#",
            "classes": "c-link"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "classes": "c-link"
          }
        ],
        "attributes": {
          "aria-labelledby": "navigation-link-example-item-3"
        }
      }
    }
  ]
}) }}

Tree nav: mostrar activo un item del tree con javascript

Puedes usar con javascript la función global activateItemsTree(tree, element, true), para mostrar un item activo del tree nav. Ej: Abre la consola del navegador y escribe activateItemsTree('tree-nav-js', 'sub-sub-tree-nav-js-item-1-2-1', true) para mostrar un item del menú activo.

Ejemplo: "Tree nav: mostrar activo un item del tree con javascript", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <nav aria-label="Árbol de navegación">
    <ul class="c-tree mt-base" id="tree-nav-js" role="tree" data-tree-navigation data-module="c-tree">
      <li id="tree-nav-js-item-1" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="tree-nav-js-item-1-link" class="block px-xs">
                  Item 1
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-nav-js-item-1">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-1-0-link" href="index.html" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-1-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-1-2" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <a id="sub-tree-nav-js-item-1-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                      Subitem 3
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-nav-js-item-3">
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-tree-nav-js-item-1-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-tree-nav-js-item-1-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                        Subitem 1
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-tree-nav-js-item-1-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-tree-nav-js-item-1-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                        Subitem 2
                      </a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-sub-tree-nav-js-item-1-2-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <a id="sub-sub-tree-nav-js-item-1-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                        Subitem 3
                      </a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="tree-nav-js-item-2" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="tree-nav-js-item-2-link" class="block px-xs">
                  Item 2
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-nav-js-item-2">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-2-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-2-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-2-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-nav-js-item-3" class="c-tree__item ml-4 my-sm  focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <span id="tree-nav-js-item-3-link" class="block px-xs">
                  Item 3
                </span>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-nav-js-item-3">
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-3-0-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 1
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-3-1-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 2
                  </a>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-none" id="sub-tree-nav-js-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <a id="sub-tree-nav-js-item-3-2-link" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
                    Subitem 3
                  </a>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<!-- /tree -->

Ejemplo: "Tree nav: mostrar activo un item del tree con javascript", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-navigation-js",
  "classes": "mt-base",
  "id": "tree-nav-js",
  "type": "navigation",
  "idPrefix": "tree-nav-js-example",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-nav-js-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "index.html"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#"
                }
              ],
              "attributes": {
                "aria-labelledby": "tree-nav-js-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-nav-js-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-nav-js-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-3"
        }
      }
    }
  ]
}) }}
Mostrar códigodel ejemplo: Tree nav: mostrar activo un item del tree con javascript

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-navigation-js",
  "classes": "mt-base",
  "id": "tree-nav-js",
  "type": "navigation",
  "idPrefix": "tree-nav-js-example",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-nav-js-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "index.html"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "href": "#"
                },
                {
                  "text": "Subitem 2",
                  "href": "#"
                },
                {
                  "text": "Subitem 3",
                  "href": "#"
                }
              ],
              "attributes": {
                "aria-labelledby": "tree-nav-js-item-3"
              }
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-nav-js-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-nav-js-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "href": "#"
          },
          {
            "text": "Subitem 2",
            "href": "#"
          },
          {
            "text": "Subitem 3",
            "href": "#"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-nav-js-item-3"
        }
      }
    }
  ]
}) }}

Con pista y error

Ejemplo: "Con pista y error", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset aria-describedby="with-hint-and-error-hint with-hint-and-error-error" aria-errormessage="with-hint-and-error-error">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-hint-and-error-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="with-hint-and-error-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: No tienes permiso para seleccionar ese organismo.
    </p>
    <!-- /error-message -->
    <ul class="c-tree mt-base" id="with-hint-and-error" role="tree" data-module="c-tree">
      <li id="with-hint-and-error-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-example-item-1-input" name="with-hint-and-error" type="radio" value="" aria-invalid="true">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hint-and-error-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-1-0-input" name="with-hint-and-error" type="radio" value="subitem-1" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-1-1-input" name="with-hint-and-error" type="radio" value="subitem-2" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-1-2-input" name="with-hint-and-error" type="radio" value="subitem-3" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-hint-and-error-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-example-item-2-input" name="with-hint-and-error" type="radio" value="" checked aria-invalid="true">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hint-and-error-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-2-0-input" name="with-hint-and-error" type="radio" value="subitem-1" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-2-1-input" name="with-hint-and-error" type="radio" value="subitem-2" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-2-2-input" name="with-hint-and-error" type="radio" value="subitem-3" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-hint-and-error-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hint-and-error-example-item-3-input" name="with-hint-and-error" type="radio" value="" aria-invalid="true">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hint-and-error-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hint-and-error-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-3-0-input" name="with-hint-and-error" type="radio" value="subitem-1" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-3-1-input" name="with-hint-and-error" type="radio" value="subitem-2" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hint-and-error-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hint-and-error-example-item-3-2-input" name="with-hint-and-error" type="radio" value="subitem-3" aria-invalid="true">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hint-and-error-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con pista y error", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-hint-and-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "errorMessage": {
    "text": "Error: No tienes permiso para seleccionar ese organismo."
  },
  "idPrefix": "with-hint-and-error",
  "items": [
    {
      "text": "Item 1",
      "id": "with-hint-and-error-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-hint-and-error-example-item-2",
      "checked": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-hint-and-error-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Error:Error: No tienes permiso para seleccionar ese organismo.

Mostrar códigodel ejemplo: Con pista y error

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-hint-and-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "errorMessage": {
    "text": "Error: No tienes permiso para seleccionar ese organismo."
  },
  "idPrefix": "with-hint-and-error",
  "items": [
    {
      "text": "Item 1",
      "id": "with-hint-and-error-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-hint-and-error-example-item-2",
      "checked": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-hint-and-error-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hint-and-error-example-item-3"
        }
      }
    }
  ]
}) }}

Con item deshabilitado

Ejemplo: "Con item deshabilitado", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-disabled-item-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-disabled-item-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-disabled-item" role="tree" data-module="c-tree">
      <li id="with-disabled-item-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-example-item-1-input" name="with-disabled-item" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-disabled-item-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-1-0-input" name="with-disabled-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-1-1-input" name="with-disabled-item" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-1-2-input" name="with-disabled-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-disabled-item-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-example-item-2-input" name="with-disabled-item" type="radio" value="" disabled>
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-disabled-item-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-2-0-input" name="with-disabled-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-2-1-input" name="with-disabled-item" type="radio" value="subitem-2" disabled>
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-2-2-input" name="with-disabled-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-disabled-item-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-disabled-item-example-item-3-input" name="with-disabled-item" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-disabled-item-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-disabled-item-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-3-0-input" name="with-disabled-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-3-1-input" name="with-disabled-item" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-disabled-item-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-disabled-item-example-item-3-2-input" name="with-disabled-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-disabled-item-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con item deshabilitado", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-disabled-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-disabled-item",
  "items": [
    {
      "text": "Item 1",
      "id": "with-disabled-item-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-disabled-item-example-item-2",
      "disabled": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-disabled-item-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con item deshabilitado

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-disabled-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-disabled-item",
  "items": [
    {
      "text": "Item 1",
      "id": "with-disabled-item-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-disabled-item-example-item-2",
      "disabled": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "disabled": true
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-disabled-item-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-disabled-item-example-item-3"
        }
      }
    }
  ]
}) }}

Con item activo

Ejemplo: "Con item activo", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-active-item-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-active-item-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-active-item" role="tree" data-module="c-tree">
      <li id="with-active-item-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-example-item-1-input" name="with-active-item" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-active-item-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-1-0-input" name="with-active-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-1-1-input" name="with-active-item" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-1-2-input" name="with-active-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-active-item-example-item-2" class="c-tree__item ml-4 focus:outline-none font-bold" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-example-item-2-input" name="with-active-item" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-active-item-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-2-0-input" name="with-active-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-2-1-input" name="with-active-item" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-2-2-input" name="with-active-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-active-item-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-active-item-example-item-3-input" name="with-active-item" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-active-item-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-active-item-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-3-0-input" name="with-active-item" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-3-1-input" name="with-active-item" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-active-item-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-active-item-example-item-3-2-input" name="with-active-item" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-active-item-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con item activo", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-active-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-active-item",
  "items": [
    {
      "text": "Item 1",
      "id": "with-active-item-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-active-item-example-item-2",
      "active": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-active-item-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con item activo

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-active-item",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-active-item",
  "items": [
    {
      "text": "Item 1",
      "id": "with-active-item-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-active-item-example-item-2",
      "active": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-active-item-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-active-item-example-item-3"
        }
      }
    }
  ]
}) }}

Con pistas en items

Ejemplo: "Con pistas en items", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="with-hints-on-items" role="tree" data-module="c-tree">
      <li id="with-hints-on-items-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-example-item-1-input" name="with-hints-on-items" type="radio" value="" aria-describedby="with-hints-on-items-example-item-1-item-hint">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-example-item-1-input">Item 1</label>
                  <!-- /label -->
                  <!-- hint -->
                  <p id="with-hints-on-items-example-item-1-item-hint" class="block text-neutral-dark">Pista en item</p>
                  <!-- /hint -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hints-on-items-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-1-0-input" name="with-hints-on-items" type="radio" value="subitem-1" aria-describedby="sub-with-hints-on-items-example-item-1-0-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-1-0-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-1-1-input" name="with-hints-on-items" type="radio" value="subitem-2" aria-describedby="sub-with-hints-on-items-example-item-1-1-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-1-1-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-1-2-input" name="with-hints-on-items" type="radio" value="subitem-3" aria-describedby="sub-with-hints-on-items-example-item-1-2-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-1-2-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-hints-on-items-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-example-item-2-input" name="with-hints-on-items" type="radio" value="" aria-describedby="with-hints-on-items-example-item-2-item-hint">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-example-item-2-input">Item 2</label>
                  <!-- /label -->
                  <!-- hint -->
                  <p id="with-hints-on-items-example-item-2-item-hint" class="block text-neutral-dark">Pista en item</p>
                  <!-- /hint -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hints-on-items-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-2-0-input" name="with-hints-on-items" type="radio" value="subitem-1" aria-describedby="sub-with-hints-on-items-example-item-2-0-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-2-0-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-2-1-input" name="with-hints-on-items" type="radio" value="subitem-2" aria-describedby="sub-with-hints-on-items-example-item-2-1-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-2-1-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-2-2-input" name="with-hints-on-items" type="radio" value="subitem-3" aria-describedby="sub-with-hints-on-items-example-item-2-2-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-2-2-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-hints-on-items-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-hints-on-items-example-item-3-input" name="with-hints-on-items" type="radio" value="" aria-describedby="with-hints-on-items-example-item-3-item-hint">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-hints-on-items-example-item-3-input">Item 3</label>
                  <!-- /label -->
                  <!-- hint -->
                  <p id="with-hints-on-items-example-item-3-item-hint" class="block text-neutral-dark">Pista en item</p>
                  <!-- /hint -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-hints-on-items-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-3-0-input" name="with-hints-on-items" type="radio" value="subitem-1" aria-describedby="sub-with-hints-on-items-example-item-3-0-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-3-0-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-3-1-input" name="with-hints-on-items" type="radio" value="subitem-2" aria-describedby="sub-with-hints-on-items-example-item-3-1-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-3-1-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-hints-on-items-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-hints-on-items-example-item-3-2-input" name="with-hints-on-items" type="radio" value="subitem-3" aria-describedby="sub-with-hints-on-items-example-item-3-2-item-hint">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-hints-on-items-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                    <!-- hint -->
                    <p id="sub-with-hints-on-items-example-item-3-2-item-hint" class="block text-neutral-dark">Pista en item</p>
                    <!-- /hint -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con pistas en items", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-hints-on-items",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "with-hints-on-items",
  "items": [
    {
      "text": "Item 1",
      "hint": {
        "text": "Pista en item"
      },
      "id": "with-hints-on-items-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "hint": {
        "text": "Pista en item"
      },
      "id": "with-hints-on-items-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-hints-on-items-example-item-3",
      "hint": {
        "text": "Pista en item"
      },
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Con pistas en items

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-hints-on-items",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "with-hints-on-items",
  "items": [
    {
      "text": "Item 1",
      "hint": {
        "text": "Pista en item"
      },
      "id": "with-hints-on-items-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "hint": {
        "text": "Pista en item"
      },
      "id": "with-hints-on-items-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-hints-on-items-example-item-3",
      "hint": {
        "text": "Pista en item"
      },
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "hint": {
              "text": "Pista en item"
            }
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3",
            "hint": {
              "text": "Pista en item"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "with-hints-on-items-example-item-3"
        }
      }
    }
  ]
}) }}

Con un texto de item muy largo

Ejemplo: "Con un texto de item muy largo", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-very-long-option-text-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-very-long-option-text-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-very-long-option-text" role="tree" data-module="c-tree">
      <li id="with-very-long-option-text-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-example-item-1-input" name="with-very-long-option-text" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-example-item-1-input">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-very-long-option-text-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-1-0-input" name="with-very-long-option-text" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-1-0-input">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-1-1-input" name="with-very-long-option-text" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-1-1-input">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-1-2-input" name="with-very-long-option-text" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-1-2-input">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-very-long-option-text-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-example-item-2-input" name="with-very-long-option-text" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-example-item-2-input">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-very-long-option-text-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-2-0-input" name="with-very-long-option-text" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-2-0-input">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-2-1-input" name="with-very-long-option-text" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-2-1-input">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-2-2-input" name="with-very-long-option-text" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-2-2-input">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-very-long-option-text-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-very-long-option-text-example-item-3-input" name="with-very-long-option-text" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-very-long-option-text-example-item-3-input">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-very-long-option-text-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-3-0-input" name="with-very-long-option-text" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-3-0-input">Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-3-1-input" name="with-very-long-option-text" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-3-1-input">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-very-long-option-text-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-very-long-option-text-example-item-3-2-input" name="with-very-long-option-text" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-very-long-option-text-example-item-3-2-input">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con un texto de item muy largo", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-very-long-option-text",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-very-long-option-text",
  "items": [
    {
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
      "id": "with-very-long-option-text-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-1"
        }
      }
    },
    {
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
      "id": "with-very-long-option-text-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-2"
        }
      }
    },
    {
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
      "id": "with-very-long-option-text-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con un texto de item muy largo

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-very-long-option-text",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-very-long-option-text",
  "items": [
    {
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
      "id": "with-very-long-option-text-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-1"
        }
      }
    },
    {
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
      "id": "with-very-long-option-text-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-2"
        }
      }
    },
    {
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
      "id": "with-very-long-option-text-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
            "value": "subitem-1"
          },
          {
            "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
            "value": "subitem-2"
          },
          {
            "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-very-long-option-text-example-item-3"
        }
      }
    }
  ]
}) }}

Con un legend como encabezado

Ejemplo: "Con un legend como encabezado", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="c-h2">
      <h2>
        Selecciona organismo
      </h2>
    </legend>
    <ul class="c-tree" id="with-legend-as-page-heading" role="tree" data-module="c-tree">
      <li id="with-legend-as-page-heading-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-example-item-1-input" name="with-legend-as-page-heading" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-legend-as-page-heading-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-1-0-input" name="with-legend-as-page-heading" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-1-1-input" name="with-legend-as-page-heading" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-1-2-input" name="with-legend-as-page-heading" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-legend-as-page-heading-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-example-item-2-input" name="with-legend-as-page-heading" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-legend-as-page-heading-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-2-0-input" name="with-legend-as-page-heading" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-2-1-input" name="with-legend-as-page-heading" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-2-2-input" name="with-legend-as-page-heading" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-legend-as-page-heading-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-legend-as-page-heading-example-item-3-input" name="with-legend-as-page-heading" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-legend-as-page-heading-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-legend-as-page-heading-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-3-0-input" name="with-legend-as-page-heading" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-3-1-input" name="with-legend-as-page-heading" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-legend-as-page-heading-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-legend-as-page-heading-example-item-3-2-input" name="with-legend-as-page-heading" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-legend-as-page-heading-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con un legend como encabezado", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-legend-as-page-heading",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo",
      "classes": "c-h2",
      "isPageHeading": true
    },
    "headingLevel": 2
  },
  "idPrefix": "with-legend-as-page-heading",
  "items": [
    {
      "text": "Item 1",
      "id": "with-legend-as-page-heading-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-legend-as-page-heading-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-legend-as-page-heading-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-3"
        }
      }
    }
  ]
}) }}

Selecciona organismo

Mostrar códigodel ejemplo: Con un legend como encabezado

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-legend-as-page-heading",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo",
      "classes": "c-h2",
      "isPageHeading": true
    },
    "headingLevel": 2
  },
  "idPrefix": "with-legend-as-page-heading",
  "items": [
    {
      "text": "Item 1",
      "id": "with-legend-as-page-heading-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-legend-as-page-heading-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-legend-as-page-heading-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-legend-as-page-heading-example-item-3"
        }
      }
    }
  ]
}) }}

Sin fieldset

Ejemplo: "Sin fieldset", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <ul class="c-tree" id="without-fieldset" role="tree" data-module="c-tree">
    <li id="without-fieldset-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
              <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
              <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
            </svg>
          </span>
          <div>
            <div class="relative flex items-start py-xs">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-example-item-1-input" name="without-fieldset" type="radio" value="">
              </div>
              <div class="flex-1 pt-0.5 leading-5">
                <!-- label -->
                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-example-item-1-input">Item 1</label>
                <!-- /label -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul role="group" class='c-tree__itemgroup' aria-labelledby="without-fieldset-example-item-1">
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-1-0" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-1-0-input" name="without-fieldset" type="radio" value="subitem-1">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-1-0-input">Subitem 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-1-1" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-1-1-input" name="without-fieldset" type="radio" value="subitem-2">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-1-1-input">Subitem 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-1-2" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-1-2-input" name="without-fieldset" type="radio" value="subitem-3">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-1-2-input">Subitem 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </li>
    <li id="without-fieldset-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
              <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
              <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
            </svg>
          </span>
          <div>
            <div class="relative flex items-start py-xs">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-example-item-2-input" name="without-fieldset" type="radio" value="">
              </div>
              <div class="flex-1 pt-0.5 leading-5">
                <!-- label -->
                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-example-item-2-input">Item 2</label>
                <!-- /label -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul role="group" class='c-tree__itemgroup' aria-labelledby="without-fieldset-example-item-2">
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-2-0" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-2-0-input" name="without-fieldset" type="radio" value="subitem-1">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-2-0-input">Subitem 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-2-1" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-2-1-input" name="without-fieldset" type="radio" value="subitem-2">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-2-1-input">Subitem 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-2-2" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-2-2-input" name="without-fieldset" type="radio" value="subitem-3">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-2-2-input">Subitem 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </li>
    <li id="without-fieldset-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
      <div class="w-full h-full">
        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
              <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
              <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
            </svg>
          </span>
          <div>
            <div class="relative flex items-start py-xs">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="without-fieldset-example-item-3-input" name="without-fieldset" type="radio" value="">
              </div>
              <div class="flex-1 pt-0.5 leading-5">
                <!-- label -->
                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="without-fieldset-example-item-3-input">Item 3</label>
                <!-- /label -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul role="group" class='c-tree__itemgroup' aria-labelledby="without-fieldset-example-item-3">
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-3-0" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-3-0-input" name="without-fieldset" type="radio" value="subitem-1">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-3-0-input">Subitem 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-3-1" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-3-1-input" name="without-fieldset" type="radio" value="subitem-2">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-3-1-input">Subitem 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-without-fieldset-example-item-3-2" role="treeitem" data-module="c-tree__item">
          <div class="block">
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-without-fieldset-example-item-3-2-input" name="without-fieldset" type="radio" value="subitem-3">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-without-fieldset-example-item-3-2-input">Subitem 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!-- /tree -->

Ejemplo: "Sin fieldset", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "without-fieldset",
  "idPrefix": "without-fieldset",
  "items": [
    {
      "text": "Item 1",
      "id": "without-fieldset-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "without-fieldset-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "without-fieldset-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-3"
        }
      }
    }
  ]
}) }}
Mostrar códigodel ejemplo: Sin fieldset

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "without-fieldset",
  "idPrefix": "without-fieldset",
  "items": [
    {
      "text": "Item 1",
      "id": "without-fieldset-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "without-fieldset-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "without-fieldset-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "without-fieldset-example-item-3"
        }
      }
    }
  ]
}) }}

Con todo items padres

Ejemplo: "Con todo items padres", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="parent-example-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="parent-example-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="parent-example" role="tree" data-module="c-tree">
      <li id="parent-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-1-input" name="with-all-parent-items" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="parent-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-1-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="parent-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-2-input" name="with-all-parent-items" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="parent-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-2-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="parent-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="parent-example-item-3-input" name="with-all-parent-items" type="checkbox" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="parent-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="parent-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-0-input" name="with-all-parent-items" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-1-input" name="with-all-parent-items" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-parent-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-parent-example-item-3-2-input" name="with-all-parent-items" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-parent-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con todo items padres", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-all-parent-items",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "parent-example",
  "items": [
    {
      "text": "Item 1",
      "id": "parent-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "parent-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "parent-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con todo items padres

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-all-parent-items",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "parent-example",
  "items": [
    {
      "text": "Item 1",
      "id": "parent-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "parent-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "parent-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-3"
        }
      }
    }
  ]
}) }}

Con un item padre abierto

Usa 'expanded': true

Ejemplo: "Con un item padre abierto", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-a-parent-item-opened-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-a-parent-item-opened-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-a-parent-item-opened" role="tree" data-module="c-tree">
      <li id="tree-item-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-1-input" name="with-a-parent-item-opened" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-1-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-2-input" name="with-a-parent-item-opened" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-2-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-item-3-input" name="with-a-parent-item-opened" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-0-input" name="with-a-parent-item-opened" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-1-input" name="with-a-parent-item-opened" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-item-3-2-input" name="with-a-parent-item-opened" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con un item padre abierto", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-a-parent-item-opened",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-a-parent-item-opened",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-item-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-item-item-2",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-item-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con un item padre abierto

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-a-parent-item-opened",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-a-parent-item-opened",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-item-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-item-item-2",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-item-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-item-3"
        }
      }
    }
  ]
}) }}

Con muchos niveles de profundidad

Ejemplo: "Con muchos niveles de profundidad", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="tree-item-nodes-with-many-depth-levels-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="tree-item-nodes-with-many-depth-levels-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="tree-item-nodes-with-many-depth-levels" role="tree" data-module="c-tree">
      <li id="tree-item-nodes-with-many-depth-levels-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-0-input" name="with-many-depth-levels" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-0-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-nodes-with-many-depth-levels-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-1-input" name="with-many-depth-levels" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-1-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-nodes-with-many-depth-levels-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-2-input" name="with-many-depth-levels" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-2-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-0-input" name="with-many-depth-levels" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-0-input">Subitem 1</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2-input">Subitem 3</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-1-input" name="with-many-depth-levels" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-1-input">Subitem 2</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2-input">Subitem 3</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-2-input" name="with-many-depth-levels" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-2-input">Subitem 3</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
                  <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                    <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                        <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                        <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                      </svg>
                    </span>
                    <div>
                      <div class="relative flex items-start py-xs">
                        <div class="flex items-center mx-sm">
                          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                        </div>
                        <div class="flex-1 pt-0.5 leading-5">
                          <!-- label -->
                          <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-input">Subitem 3</label>
                          <!-- /label -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <ul role="group" class='c-tree__itemgroup'>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-input">Subitem 1</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-input">Subitem 2</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-input">Subitem 3</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con muchos niveles de profundidad", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-many-depth-levels",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item-nodes-with-many-depth-levels",
  "items": [
    {
      "text": "Item 1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 3",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 2",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 3",
            "expanded": true,
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3",
                  "expanded": true,
                  "sub": {
                    "items": [
                      {
                        "text": "Subitem 1",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 2",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 3",
                        "expanded": true,
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con muchos niveles de profundidad

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-many-depth-levels",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item-nodes-with-many-depth-levels",
  "items": [
    {
      "text": "Item 1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 3",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 2",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 3",
            "expanded": true,
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3",
                  "expanded": true,
                  "sub": {
                    "items": [
                      {
                        "text": "Subitem 1",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 2",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 3",
                        "expanded": true,
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}) }}

Indeterminado

Usando el parámetro 'isIndeterminate': true podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.

Ejemplo: "Indeterminado", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="indeterminate-example-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="indeterminate-example-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="indeterminate-example" role="tree" data-module="c-tree">
      <li id="indeterminate-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-example-item-1-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="indeterminate-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-0-input" name="indeterminate" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-1-input" name="indeterminate" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-1-2-input" name="indeterminate" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="indeterminate-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base c-checkboxes__indeterminate-active " id="indeterminate-example-item-2-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="indeterminate-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-0-input" name="indeterminate" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-1-input" name="indeterminate" type="checkbox" value="subitem-2" checked>
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-2-2-input" name="indeterminate" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="indeterminate-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="indeterminate-example-item-3-input" name="indeterminate" type="checkbox" value="" onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="indeterminate-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="indeterminate-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-0-input" name="indeterminate" type="checkbox" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-1-input" name="indeterminate" type="checkbox" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-indeterminate-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-indeterminate-example-item-3-2-input" name="indeterminate" type="checkbox" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-indeterminate-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Indeterminado", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "indeterminate",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "indeterminate-example",
  "items": [
    {
      "text": "Item 1",
      "id": "indeterminate-example-item-1",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "indeterminate-example-item-2",
      "isIndeterminate": true,
      "indeterminateChecked": true,
      "checked": false,
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "checked": true
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "indeterminate-example-item-3",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Indeterminado

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "indeterminate",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "indeterminate-example",
  "items": [
    {
      "text": "Item 1",
      "id": "indeterminate-example-item-1",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "indeterminate-example-item-2",
      "isIndeterminate": true,
      "indeterminateChecked": true,
      "checked": false,
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2",
            "checked": true
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "indeterminate-example-item-3",
      "isIndeterminate": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "indeterminate-example-item-3"
        }
      }
    }
  ]
}) }}

Ejemplo: "Con searchbar", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- searchbar -->
    <!-- label -->
    <label class="block sr-only undefined" for="with-searchbar-searchbar">Buscar</label>
    <!-- /label -->
    <div class="relative">
      <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="with-searchbar-searchbar" name="with-searchbar-searchbar" type="search" placeholder="Buscar organismo">
      <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
        <span class="sr-only">Buscar</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
          <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
        </svg>
      </button>
    </div>
    <!-- /searchbar -->
    <ul class="c-tree mt-base" id="with-searchbar" role="tree" data-module="c-tree">
      <li id="with-searchbar-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-1-input" name="with-searchbar" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-0-input" name="with-searchbar" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-1-input" name="with-searchbar" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-1-2-input" name="with-searchbar" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-2-input" name="with-searchbar" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-0-input" name="with-searchbar" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-1-input" name="with-searchbar" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-2-2-input" name="with-searchbar" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-item-3-input" name="with-searchbar" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-0-input" name="with-searchbar" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-1-input" name="with-searchbar" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-item-3-2-input" name="with-searchbar" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con searchbar", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo"
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Con searchbar

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo"
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-item-3"
        }
      }
    }
  ]
}) }}

Ejemplo: "Con error en searchbar", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- searchbar -->
    <!-- label -->
    <label class="block sr-only undefined" for="with-searchbar-error-searchbar">Buscar</label>
    <!-- /label -->
    <div class="relative">
      <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full border-alert-base ring-2 ring-alert-base " id="with-searchbar-error-searchbar" name="with-searchbar-error-searchbar" type="search" aria-describedby="with-searchbar-error-searchbar-error" aria-errormessage="with-searchbar-error-searchbar-error" aria-invalid="true" placeholder="Buscar organismo">
      <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
        <span class="sr-only">Buscar</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
          <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
        </svg>
      </button>
      <!-- error-message -->
      <p id="with-searchbar-error-searchbar-error" class="block font-semibold text-alert-base mt-xs">
        <span class="sr-only">Error:</span>Error: Introduce al menos un carácter
      </p>
      <!-- /error-message -->
    </div>
    <!-- /searchbar -->
    <ul class="c-tree mt-base" id="with-searchbar-error" role="tree" data-module="c-tree">
      <li id="with-searchbar-error-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-1-input" name="with-searchbar-error" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-error-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-1-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-error-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-2-input" name="with-searchbar-error" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-error-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-2-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-error-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-error-item-3-input" name="with-searchbar-error" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-error-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-error-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-0-input" name="with-searchbar-error" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-1-input" name="with-searchbar-error" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-error-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-error-item-3-2-input" name="with-searchbar-error" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-error-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con error en searchbar", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-error-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo",
    "errorMessage": {
      "text": "Error: Introduce al menos un carácter",
      "classes": "mt-xs"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-error-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-error-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-error-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo

Error:Error: Introduce al menos un carácter

Mostrar códigodel ejemplo: Con error en searchbar

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar-error",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-error-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo",
    "errorMessage": {
      "text": "Error: Introduce al menos un carácter",
      "classes": "mt-xs"
    }
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-error-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-error-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-error-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-error-item-3"
        }
      }
    }
  ]
}) }}

Con searchbar y scroll en el contenedor de árbol

Puedes usar las clases de CSS: max-h-64 o max-h-40 junto a overflow-y-auto, para poner barras de scroll al árbol en caso de que su altura sea muy grande o bien cuando la altura crezca debido a que los items sean expandidos por el usuario.

Ejemplo: "Con searchbar y scroll en el contenedor de árbol", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- searchbar -->
    <!-- label -->
    <label class="block sr-only undefined" for="with-searchbar-scroll-searchbar">Buscar</label>
    <!-- /label -->
    <div class="relative">
      <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full" id="with-searchbar-scroll-searchbar" name="with-searchbar-scroll-searchbar" type="search" placeholder="Buscar organismo">
      <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
        <span class="sr-only">Buscar</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
          <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
        </svg>
      </button>
    </div>
    <!-- /searchbar -->
    <ul class="c-tree mt-base max-h-64 overflow-y-auto" id="with-searchbar-scroll" role="tree" data-module="c-tree">
      <li id="with-searchbar-scroll-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-scroll-item-1-input" name="with-searchbar-scroll" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-scroll-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-scroll-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-1-0-input" name="with-searchbar-scroll" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-1-1-input" name="with-searchbar-scroll" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-1-2-input" name="with-searchbar-scroll" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-scroll-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-scroll-item-2-input" name="with-searchbar-scroll" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-scroll-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-scroll-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-2-0-input" name="with-searchbar-scroll" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-2-1-input" name="with-searchbar-scroll" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-2-2-input" name="with-searchbar-scroll" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-searchbar-scroll-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-searchbar-scroll-item-3-input" name="with-searchbar-scroll" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-searchbar-scroll-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="with-searchbar-scroll-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-3-0-input" name="with-searchbar-scroll" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-3-1-input" name="with-searchbar-scroll" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-searchbar-scroll-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-searchbar-scroll-item-3-2-input" name="with-searchbar-scroll" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-searchbar-scroll-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con searchbar y scroll en el contenedor de árbol", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar-scroll",
  "classes": "mt-base max-h-64 overflow-y-auto",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-scroll-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo"
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-scroll-item-1",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-scroll-item-2",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-scroll-item-3",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Con searchbar y scroll en el contenedor de árbol

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-searchbar-scroll",
  "classes": "mt-base max-h-64 overflow-y-auto",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "searchbar": {
    "id": "with-searchbar-scroll-searchbar",
    "label": {
      "text": "Buscar"
    },
    "placeholder": "Buscar organismo"
  },
  "items": [
    {
      "text": "Item 1",
      "id": "with-searchbar-scroll-item-1",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "with-searchbar-scroll-item-2",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "with-searchbar-scroll-item-3",
      "expanded": true,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-searchbar-scroll-item-3"
        }
      }
    }
  ]
}) }}

Peque

Con clases aplicadas.

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-classes-applied-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-classes-applied-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree c-tree--sm mt-sm" id="with-classes-applied" role="tree" data-module="c-tree">
      <li id="with-classes-applied-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div class=" -mt-xs pt-1">
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-0-input" name="with-classes-applied" type="radio" value="option-1">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block text-sm -mt-1" for="with-classes-applied-0-input">Opción 1</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="classes-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left -mt-xs pt-1">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div class=" -mt-xs pt-1">
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="classes-1-input" name="with-classes-applied" type="radio" value="option-2">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block text-sm -mt-1" for="classes-1-input">Opción 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="classes-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block -mt-xs pt-1">
              <div class=" -mt-xs pt-1">
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-0-input" name="with-classes-applied" type="radio" value="item">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block text-sm -mt-1" for="sub-classes-1-0-input">Item</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block -mt-xs pt-1 font-bold" aria-current="page">
              <div class="font-bold">
                <div class=" -mt-xs pt-1">
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-1-input" name="with-classes-applied" type="radio" value="item">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block text-sm -mt-1" for="sub-classes-1-1-input">Item</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-classes-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block -mt-xs pt-1">
              <div class=" -mt-xs pt-1">
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-classes-1-2-input" name="with-classes-applied" type="radio" value="item">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block text-sm -mt-1" for="sub-classes-1-2-input">Item</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-classes-applied-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div class=" -mt-xs pt-1">
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-2-input" name="with-classes-applied" type="radio" value="option-3">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block text-sm -mt-1" for="with-classes-applied-2-input">Opción 3</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-classes-applied-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div class=" -mt-xs pt-1">
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-3-input" name="with-classes-applied" type="radio" value="option-4">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block text-sm -mt-1" for="with-classes-applied-3-input">Opción 4</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-classes-applied-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div class=" -mt-xs pt-1">
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-classes-applied-4-input" name="with-classes-applied" type="radio" value="option-5">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block text-sm -mt-1" for="with-classes-applied-4-input">Opción 5</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-classes-applied",
  "classes": "c-tree--sm mt-sm",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      },
      "expanded": true,
      "id": "classes-1",
      "sub": {
        "items": [
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            },
            "active": true
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "classes-1"
        }
      }
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-classes-applied",
  "classes": "c-tree--sm mt-sm",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      },
      "expanded": true,
      "id": "classes-1",
      "sub": {
        "items": [
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            },
            "active": true
          },
          {
            "text": "Item",
            "value": "item",
            "classes": "-mt-xs pt-1",
            "label": {
              "classes": "text-sm -mt-1"
            }
          }
        ],
        "attributes": {
          "aria-labelledby": "classes-1"
        }
      }
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "classes": "-mt-xs pt-1",
      "label": {
        "classes": "text-sm -mt-1"
      }
    }
  ]
}) }}

Con idprefix

Mostrar código para ver el idPrefix aplicado

Ejemplo: "Con idprefix", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-idprefix-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-idprefix-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-idprefix" role="tree" data-module="c-tree">
      <li id="with-idprefix-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-idprefix-0-input" name="with-idprefix" type="radio" value="option-1">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-idprefix-0-input">Opción 1</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-idprefix-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-idprefix-1-input" name="with-idprefix" type="radio" value="option-2">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-idprefix-1-input">Opción 2</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-idprefix-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-idprefix-2-input" name="with-idprefix" type="radio" value="option-3">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-idprefix-2-input">Opción 3</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-idprefix-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-idprefix-3-input" name="with-idprefix" type="radio" value="option-4">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-idprefix-3-input">Opción 4</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-idprefix-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-idprefix-4-input" name="with-idprefix" type="radio" value="option-5">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-idprefix-4-input">Opción 5</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con idprefix", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-idprefix",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-idprefix",
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1"
    },
    {
      "text": "Opción 2",
      "value": "option-2"
    },
    {
      "text": "Opción 3",
      "value": "option-3"
    },
    {
      "text": "Opción 4",
      "value": "option-4"
    },
    {
      "text": "Opción 5",
      "value": "option-5"
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con idprefix

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-idprefix",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "with-idprefix",
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1"
    },
    {
      "text": "Opción 2",
      "value": "option-2"
    },
    {
      "text": "Opción 3",
      "value": "option-3"
    },
    {
      "text": "Opción 4",
      "value": "option-4"
    },
    {
      "text": "Opción 5",
      "value": "option-5"
    }
  ]
}) }}

Con ids individuales

Mostrar código para ver los id aplicados

Ejemplo: "Con ids individuales", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-individual-ids-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-individual-ids-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-individual-ids" role="tree" data-module="c-tree">
      <li id="option-A" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-A-input" name="with-individual-ids" type="radio" value="option-1">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-A-input">Opción 1</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="option-B" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-B-input" name="with-individual-ids" type="radio" value="option-2">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-B-input">Opción 2</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="option-C" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-C-input" name="with-individual-ids" type="radio" value="option-3">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-C-input">Opción 3</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="option-D" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-D-input" name="with-individual-ids" type="radio" value="option-4">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-D-input">Opción 4</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="option-E" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="option-E-input" name="with-individual-ids" type="radio" value="option-5">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="option-E-input">Opción 5</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con ids individuales", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-individual-ids",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "id": "option-A"
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "id": "option-B"
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "id": "option-C"
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "id": "option-D"
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "id": "option-E"
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con ids individuales

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-individual-ids",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "id": "option-A"
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "id": "option-B"
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "id": "option-C"
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "id": "option-D"
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "id": "option-E"
    }
  ]
}) }}

Con atributos

Muestra el código para ver cómo se aplican los atributos

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="with-attributes-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="with-attributes-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="with-attributes" role="tree" data-attribute-1="tree-id-example-attribute" data-module="c-tree">
      <li id="with-attributes-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-0-input" name="with-attributes" type="radio" value="option-1" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-0-input">Opción 1</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-attributes-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-1-input" name="with-attributes" type="radio" value="option-2" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-1-input">Opción 2</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-attributes-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-2-input" name="with-attributes" type="radio" value="option-3" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-2-input">Opción 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' data-sub-attribute-1="sub-value-A" data-sub-attribute-2="sub-value-B" data-sub-attribute-3="sub-value-C">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block" data-item-attribute-1="item-value-A" data-item-attribute-2="item-value-B" data-item-attribute-3="item-value-C">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-0-input" name="with-attributes" type="radio" value="item" data-item-attribute-1="item-value-A" data-item-attribute-2="item-value-B" data-item-attribute-3="item-value-C">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-0-input">Item</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-1-input" name="with-attributes" type="radio" value="item">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-1-input">Item</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-with-attributes-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-with-attributes-2-2-input" name="with-attributes" type="radio" value="item">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-with-attributes-2-2-input">Item</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="with-attributes-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-3-input" name="with-attributes" type="radio" value="option-4" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-3-input">Opción 4</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
      <li id="with-attributes-4" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item">
        <div>
          <div class="relative flex items-start py-xs">
            <div class="flex items-center mx-sm">
              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="with-attributes-4-input" name="with-attributes" type="radio" value="option-5" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            </div>
            <div class="flex-1 pt-0.5 leading-5">
              <!-- label -->
              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="with-attributes-4-input">Opción 5</label>
              <!-- /label -->
            </div>
          </div>
        </div>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Con atributos", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-attributes",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "attributes": {
    "data-attribute-1": "tree-id-example-attribute"
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      },
      "expanded": true,
      "sub": {
        "attributes": {
          "data-sub-attribute-1": "sub-value-A",
          "data-sub-attribute-2": "sub-value-B",
          "data-sub-attribute-3": "sub-value-C"
        },
        "items": [
          {
            "text": "Item",
            "value": "item",
            "attributes": {
              "data-item-attribute-1": "item-value-A",
              "data-item-attribute-2": "item-value-B",
              "data-item-attribute-3": "item-value-C"
            }
          },
          {
            "text": "Item",
            "value": "item"
          },
          {
            "text": "Item",
            "value": "item"
          }
        ]
      }
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "with-attributes",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "attributes": {
    "data-attribute-1": "tree-id-example-attribute"
  },
  "items": [
    {
      "text": "Opción 1",
      "value": "option-1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 2",
      "value": "option-2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 3",
      "value": "option-3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      },
      "expanded": true,
      "sub": {
        "attributes": {
          "data-sub-attribute-1": "sub-value-A",
          "data-sub-attribute-2": "sub-value-B",
          "data-sub-attribute-3": "sub-value-C"
        },
        "items": [
          {
            "text": "Item",
            "value": "item",
            "attributes": {
              "data-item-attribute-1": "item-value-A",
              "data-item-attribute-2": "item-value-B",
              "data-item-attribute-3": "item-value-C"
            }
          },
          {
            "text": "Item",
            "value": "item"
          },
          {
            "text": "Item",
            "value": "item"
          }
        ]
      }
    },
    {
      "text": "Opción 4",
      "value": "option-4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 5",
      "value": "option-5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}

Mostrar u ocultar un item con javascript

Puedes usar con javascript la función global activateItemsTree(tree, element, show), para mostrar u ocultar todos los items, usando el id del elemento, el parámetro show admite true o false, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemsTree('tree-item-js', 'tree-item-js-example-item-1', true) para mostrar todos los items expandidos.

Ejemplo: "Mostrar u ocultar un item con javascript", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="tree-item-js" role="tree" data-module="c-tree">
      <li id="tree-item-js-example-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-js-example-item-1-input" name="tree-item-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-js-example-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-js-example-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-1-0-input" name="tree-item-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-1-1-input" name="tree-item-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-1-2-input" name="tree-item-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-js-example-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-js-example-item-2-input" name="tree-item-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-js-example-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-js-example-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-2-0-input" name="tree-item-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-2-1-input" name="tree-item-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-2-2-input" name="tree-item-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-js-example-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-js-example-item-3-input" name="tree-item-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-js-example-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-item-js-example-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-3-0-input" name="tree-item-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-3-1-input" name="tree-item-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-js-example-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-js-example-item-3-2-input" name="tree-item-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-js-example-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Mostrar u ocultar un item con javascript", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-item-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-item-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-item-js-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-item-js-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-item-js-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Mostrar u ocultar un item con javascript

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-item-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-item-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-item-js-example-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-item-js-example-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-item-js-example-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-item-js-example-item-3"
        }
      }
    }
  ]
}) }}

Mostrar u ocultar todos los items con javascript

Puedes usar con javascript la función global activateItemsTree(tree, elements, show), para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro show admite true o false, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe activateItemsTree('tree-multiple-items-js', ['tree-multiple-items-js-1', 'tree-multiple-items-js-2'], true) para mostrar todos los items expandidos.

Ejemplo: "Mostrar u ocultar todos los items con javascript", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="tree-multiple-items-js" role="tree" data-module="c-tree">
      <li id="tree-multiple-items-js-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-js-1-input" name="tree-multiple-items-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-js-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-js-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-1-0-input" name="tree-multiple-items-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-1-1-input" name="tree-multiple-items-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-1-2-input" name="tree-multiple-items-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-multiple-items-js-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-js-2-input" name="tree-multiple-items-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-js-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-js-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-2-0-input" name="tree-multiple-items-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-2-1-input" name="tree-multiple-items-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-2-2-input" name="tree-multiple-items-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-multiple-items-js-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-js-3-input" name="tree-multiple-items-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-js-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-js-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-3-0-input" name="tree-multiple-items-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-3-1-input" name="tree-multiple-items-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-js-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-js-3-2-input" name="tree-multiple-items-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-js-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Mostrar u ocultar todos los items con javascript", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-multiple-items-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-multiple-items-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-multiple-items-js-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-multiple-items-js-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-multiple-items-js-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Mostrar u ocultar todos los items con javascript

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-multiple-items-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-multiple-items-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-multiple-items-js-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-multiple-items-js-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-multiple-items-js-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-js-3"
        }
      }
    }
  ]
}) }}

Mostrar u ocultar todos los items con javascript con diferentes estados

Puedes usar con javascript la función global activateItemsTree(tree, elements), para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro show admite true o false, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe activateItemsTree('tree-multiple-items-states-js', [['tree-multiple-items-states-item-1', true], ['tree-multiple-items-states-item-3', false]]) para mostrar todos los items expandidos.

Ejemplo: "Mostrar u ocultar todos los items con javascript con diferentes estados", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <ul class="c-tree mt-base" id="tree-multiple-items-states-js" role="tree" data-module="c-tree">
      <li id="tree-multiple-items-states-item-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-states-item-1-input" name="tree-multiple-items-states-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-states-item-1-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-states-item-1">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-1-0-input" name="tree-multiple-items-states-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-1-1-input" name="tree-multiple-items-states-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-1-2-input" name="tree-multiple-items-states-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-multiple-items-states-item-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-states-item-2-input" name="tree-multiple-items-states-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-states-item-2-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-states-item-2">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-2-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-2-0-input" name="tree-multiple-items-states-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-2-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-2-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-2-1-input" name="tree-multiple-items-states-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-2-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-2-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-2-2-input" name="tree-multiple-items-states-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-2-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-multiple-items-states-item-3" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-multiple-items-states-item-3-input" name="tree-multiple-items-states-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-multiple-items-states-item-3-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup' aria-labelledby="tree-multiple-items-states-item-3">
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-3-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-3-0-input" name="tree-multiple-items-states-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-3-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-3-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-3-1-input" name="tree-multiple-items-states-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-3-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-multiple-items-states-item-3-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-multiple-items-states-item-3-2-input" name="tree-multiple-items-states-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-multiple-items-states-item-3-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Mostrar u ocultar todos los items con javascript con diferentes estados", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-multiple-items-states-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-multiple-items-states-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-multiple-items-states-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-multiple-items-states-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-multiple-items-states-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-3"
        }
      }
    }
  ]
}) }}
Selecciona organismo
Mostrar códigodel ejemplo: Mostrar u ocultar todos los items con javascript con diferentes estados

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-multiple-items-states-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "tree-multiple-items-states-js",
  "items": [
    {
      "text": "Item 1",
      "id": "tree-multiple-items-states-item-1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "tree-multiple-items-states-item-2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "tree-multiple-items-states-item-3",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "tree-multiple-items-states-item-3"
        }
      }
    }
  ]
}) }}

Mostrar u ocultar un item con muchos niveles de profundidad con javascript

Puedes usar con javascript la función global activateItemsTree(tree, element, show), para mostrar u ocultar un item, usando el id del elemento, el parámetro show admite true o false, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemsTree('tree-item-deep-js', 'sub-sub-sub-tree-item-deep-js-2-2-2-0', true) se abrirá el último elemento del arbol, y el resto de elementos superiores.

Ejemplo: "Mostrar u ocultar un item con muchos niveles de profundidad con javascript ", de código HTML, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- tree -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset aria-describedby="tree-item-deep-js-hint">
    <legend class="font-bold">
      Selecciona organismo
    </legend>
    <!-- hint -->
    <p id="tree-item-deep-js-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
    <!-- /hint -->
    <ul class="c-tree mt-base" id="tree-item-deep-js" role="tree" data-module="c-tree">
      <li id="tree-item-deep-js-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-deep-js-0-input" name="tree-item-deep-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-deep-js-0-input">Item 1</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-0-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-0-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-0-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-0-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-0-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-0-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-0-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-0-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-0-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-deep-js-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-deep-js-1-input" name="tree-item-deep-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-deep-js-1-input">Item 2</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-1-0" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-1-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-1-0-input">Subitem 1</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-1-1" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-1-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-1-1-input">Subitem 2</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-1-2" role="treeitem" data-module="c-tree__item">
            <div class="block">
              <div>
                <div class="relative flex items-start py-xs">
                  <div class="flex items-center mx-sm">
                    <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-1-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                  </div>
                  <div class="flex-1 pt-0.5 leading-5">
                    <!-- label -->
                    <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-1-2-input">Subitem 3</label>
                    <!-- /label -->
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li id="tree-item-deep-js-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
        <div class="w-full h-full">
          <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
            <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
              </svg>
            </span>
            <div>
              <div class="relative flex items-start py-xs">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-deep-js-2-input" name="tree-item-deep-js" type="radio" value="">
                </div>
                <div class="flex-1 pt-0.5 leading-5">
                  <!-- label -->
                  <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-deep-js-2-input">Item 3</label>
                  <!-- /label -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul role="group" class='c-tree__itemgroup'>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-2-0-input" name="tree-item-deep-js" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-2-0-input">Subitem 1</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-0-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-0-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-0-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-0-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-0-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-0-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-0-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-0-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-0-2-input">Subitem 3</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-2-1-input" name="tree-item-deep-js" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-2-1-input">Subitem 2</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-1-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-1-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-1-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-1-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-1-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-1-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-1-2" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-1-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-1-2-input">Subitem 3</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-deep-js-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
            <div class="w-full h-full">
              <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                    <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                  </svg>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                    <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                  </svg>
                </span>
                <div>
                  <div class="relative flex items-start py-xs">
                    <div class="flex items-center mx-sm">
                      <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-deep-js-2-2-input" name="tree-item-deep-js" type="radio" value="">
                    </div>
                    <div class="flex-1 pt-0.5 leading-5">
                      <!-- label -->
                      <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-deep-js-2-2-input">Subitem 3</label>
                      <!-- /label -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <ul role="group" class='c-tree__itemgroup'>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-2-0" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-2-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-2-0-input">Subitem 1</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-2-1" role="treeitem" data-module="c-tree__item">
                <div class="block">
                  <div>
                    <div class="relative flex items-start py-xs">
                      <div class="flex items-center mx-sm">
                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-2-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                      </div>
                      <div class="flex-1 pt-0.5 leading-5">
                        <!-- label -->
                        <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-2-1-input">Subitem 2</label>
                        <!-- /label -->
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-deep-js-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                <div class="w-full h-full">
                  <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                    <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                        <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                        <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                      </svg>
                    </span>
                    <div>
                      <div class="relative flex items-start py-xs">
                        <div class="flex items-center mx-sm">
                          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-deep-js-2-2-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                        </div>
                        <div class="flex-1 pt-0.5 leading-5">
                          <!-- label -->
                          <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-deep-js-2-2-2-input">Subitem 3</label>
                          <!-- /label -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <ul role="group" class='c-tree__itemgroup'>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-deep-js-2-2-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-deep-js-2-2-2-0-input" name="tree-item-deep-js" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-deep-js-2-2-2-0-input">Subitem 1</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-0-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-deep-js-2-2-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-deep-js-2-2-2-1-input" name="tree-item-deep-js" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-deep-js-2-2-2-1-input">Subitem 2</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-1-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-deep-js-2-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
                    <div class="w-full h-full">
                      <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
                        <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
                            <path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
                          </svg>
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
                            <path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
                          </svg>
                        </span>
                        <div>
                          <div class="relative flex items-start py-xs">
                            <div class="flex items-center mx-sm">
                              <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-deep-js-2-2-2-2-input" name="tree-item-deep-js" type="radio" value="">
                            </div>
                            <div class="flex-1 pt-0.5 leading-5">
                              <!-- label -->
                              <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-deep-js-2-2-2-2-input">Subitem 3</label>
                              <!-- /label -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class='c-tree__itemgroup'>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-0" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-0-input" name="tree-item-deep-js" type="radio" value="subitem-1">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-0-input">Subitem 1</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-1" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-1-input" name="tree-item-deep-js" type="radio" value="subitem-2">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-1-input">Subitem 2</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-2" role="treeitem" data-module="c-tree__item">
                        <div class="block">
                          <div>
                            <div class="relative flex items-start py-xs">
                              <div class="flex items-center mx-sm">
                                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-2-input" name="tree-item-deep-js" type="radio" value="subitem-3">
                              </div>
                              <div class="flex-1 pt-0.5 leading-5">
                                <!-- label -->
                                <label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-deep-js-2-2-2-2-2-input">Subitem 3</label>
                                <!-- /label -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /tree -->

Ejemplo: "Mostrar u ocultar un item con muchos niveles de profundidad con javascript ", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-item-deep-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item-deep-js",
  "items": [
    {
      "text": "Item 1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 3",
      "expanded": false,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 2",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 3",
            "expanded": true,
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3",
                  "expanded": true,
                  "sub": {
                    "items": [
                      {
                        "text": "Subitem 1",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 2",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 3",
                        "expanded": true,
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}) }}
Selecciona organismo

Selecciona el organismo al que perteneces.

Mostrar códigodel ejemplo: Mostrar u ocultar un item con muchos niveles de profundidad con javascript

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}

{{ componentTree({
  "name": "tree-item-deep-js",
  "classes": "mt-base",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "hint": {
    "text": "Selecciona el organismo al que perteneces."
  },
  "idPrefix": "tree-item-deep-js",
  "items": [
    {
      "text": "Item 1",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 2",
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "value": "subitem-1"
          },
          {
            "text": "Subitem 2",
            "value": "subitem-2"
          },
          {
            "text": "Subitem 3",
            "value": "subitem-3"
          }
        ]
      }
    },
    {
      "text": "Item 3",
      "expanded": false,
      "sub": {
        "items": [
          {
            "text": "Subitem 1",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 2",
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3"
                }
              ]
            }
          },
          {
            "text": "Subitem 3",
            "expanded": true,
            "sub": {
              "items": [
                {
                  "text": "Subitem 1",
                  "value": "subitem-1"
                },
                {
                  "text": "Subitem 2",
                  "value": "subitem-2"
                },
                {
                  "text": "Subitem 3",
                  "value": "subitem-3",
                  "expanded": true,
                  "sub": {
                    "items": [
                      {
                        "text": "Subitem 1",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 2",
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Subitem 3",
                        "expanded": true,
                        "sub": {
                          "items": [
                            {
                              "text": "Subitem 1",
                              "value": "subitem-1"
                            },
                            {
                              "text": "Subitem 2",
                              "value": "subitem-2"
                            },
                            {
                              "text": "Subitem 3",
                              "value": "subitem-3"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}) }}