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

Por defecto

Descripción visual

Título en negro arriba, seguido de título descriptivo en negro tamaño mediano. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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

Descripción visual

Título en negro arriba, seguido de título descriptivo en negro tamaño mediano. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con checkboxes cuadrados vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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

Descripción visual

Componente de árbol, los items padres en negro tamaño estándar van precedidos de un símbolo de expandir/contraer (con el símbolo +), alineados verticalmente con espaciado uniforme.

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.

Descripción visual

Componente de árbol, los items padres en negro tamaño estándar van precedidos de un símbolo de expandir/contraer (con el símbolo +), alineados verticalmente con espaciado uniforme. Todos los items van con subrayado en color negro.

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.

Descripción visual

Componente de árbol, los items padres en negro tamaño estándar van precedidos de un símbolo de expandir/contraer (con el símbolo +), alineados verticalmente con espaciado uniforme. Todos los items van con subrayado en color azul oscuro.

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.

Descripción visual

Componente de árbol, los items padres en negro tamaño estándar van precedidos de un símbolo de expandir/contraer (con el símbolo +), alineados verticalmente con espaciado uniforme.

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

Descripción visual

Título en negrita negro, seguido de dos líneas de texto descriptivo en gris oscuro. La segunda línea de texto aparece en color rojo indicando mensaje de error. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

Selecciona organismo

Selecciona el organismo al que perteneces.

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": "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

Descripción visual

Título en negrita negro, seguido de una línea de texto descriptivo en gris oscuro. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Uno se los radio buttons está deshabilitado con fondo gris.

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

Descripción visual

Título en negrita negro, seguido de una línea de texto descriptivo en gris oscuro. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Uno se los items está activo mostrándose en negrita.

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

Descripción visual

Título en negrita negro. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Tras cada item hay una línea de texto descriptivo de color gris.

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 legend como encabezado

Descripción visual

Título en negrita negro de tamaño grande. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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

Descripción visual

Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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 un item padre abierto

Usa 'expanded': true

Descripción visual

Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Hay un item padre abierto con precedido del simbolo -. Sus items hijos se ven tabulados a la izquierda.

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

Descripción visual

Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Hay un item padre abierto con precedido del simbolo -. Sus items hijos se ven tabulados a la izquierda. Hay varios niveles de anidación.

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.

Descripción visual

Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con checkboxes cuadrados de borde gris oscuro. Subítem bajo ítem padre muestra checkbox azul con marca de verificación blanca (con el símbolo -), es un checkbox con el estado indeterminate.

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"
        }
      }
    }
  ]
}) }}

Descripción visual

Campo de búsqueda con borde gris claro de 1px, fondo blanco, texto de marcador de posición gris, e icono de lupa azul a la derecha. Debajo hay un componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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"
        }
      }
    }
  ]
}) }}

Descripción visual

Campo de búsqueda con borde rojo de 2px, fondo blanco, placeholder gris, e icono de lupa azul a la derecha. Mensaje de error en rojo debajo del campo. Debajo hay un componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

Selecciona organismo

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": "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.

Descripción visual

Campo de búsqueda con borde gris claro de 1px, fondo blanco, texto de marcador de posición gris, e icono de lupa azul a la derecha. Debajo hay un componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar. Altura total de zona de árbol limitada, área de contenido desplazable.

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.

Descripción visual

Título en negrita negro, seguido de una línea de texto descriptivo en gris oscuro. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño pequeño. Uno se los items está activo mostrándose en negrita. Todos los textos de los items están en tamaño pequeño.

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

Descripción visual

Título en negro arriba, seguido de título descriptivo en negro tamaño mediano. Componente de árbol, los items tienenradio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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"
    }
  ]
}) }}

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.

Descripción visual

Título en negro arriba. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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.

Descripción visual

Título en negro arriba. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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.

Descripción visual

Título en negro arriba. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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.

Descripción visual

Título en negro arriba. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con radio buttons circulares vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

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"
                            }
                          ]
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}) }}

Lazy rendering

No pinta los nodos hijos hasta que el usuario no lo pide desplegando un nodo padre. Usalo sólo si el arbol tiene una cantidad enorme de items.

Descripción visual

Título en negro arriba, seguido de título descriptivo en negro tamaño mediano. Componente de árbol, los items padres van precedidos de un símbolo de expandir/contraer (con el símbolo +) y con checkboxes cuadrados vacíos a la izquierda y labels de ítem padre en negro tamaño estándar.

Selecciona organismo
Mostrar códigodel ejemplo: Lazy rendering

Contenido

Nunjucks macro
{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
  "name": "type-lazy-rendering",
  "classes": "mt-base",
  "type": "checkbox",
  "fieldset": {
    "legend": {
      "text": "Selecciona organismo"
    }
  },
  "idPrefix": "type-lazy-rendering",
  "lazyRendering": true,
  "items": [
    {
      "text": "Item A",
      "id": "item-a",
      "sub": {
        "items": [
          {
            "text": "Subitem A1",
            "value": "subitem-a1",
            "sub": {
              "items": [
                {
                  "text": "SubSubitem A1.1",
                  "value": "subsubitem-a1-1",
                  "sub": {
                    "items": [
                      {
                        "text": "Level 4 A1.1.1",
                        "value": "lvl4-a1-1-1",
                        "sub": {
                          "items": [
                            {
                              "text": "Level 5 A1.1.1.1",
                              "value": "lvl5-a1-1-1-1"
                            },
                            {
                              "text": "Level 5 A1.1.1.2",
                              "value": "lvl5-a1-1-1-2"
                            }
                          ]
                        }
                      },
                      {
                        "text": "Level 4 A1.1.2",
                        "value": "lvl4-a1-1-2"
                      }
                    ]
                  }
                },
                {
                  "text": "SubSubitem A1.2",
                  "value": "subsubitem-a1-2"
                }
              ]
            }
          },
          {
            "text": "Subitem A2",
            "value": "subitem-a2"
          },
          {
            "text": "Subitem A3",
            "value": "subitem-a3"
          }
        ]
      }
    },
    {
      "text": "Item B",
      "id": "item-b",
      "sub": {
        "items": [
          {
            "text": "Subitem B1",
            "value": "subitem-b1",
            "sub": {
              "items": [
                {
                  "text": "SubSubitem B1.1",
                  "value": "subsubitem-b1-1",
                  "sub": {
                    "items": [
                      {
                        "text": "Level 4 B1.1.1",
                        "value": "lvl4-b1-1-1"
                      },
                      {
                        "text": "Level 4 B1.1.2",
                        "value": "lvl4-b1-1-2"
                      },
                      {
                        "text": "Level 4 B1.1.3",
                        "value": "lvl4-b1-1-3"
                      }
                    ]
                  }
                }
              ]
            }
          },
          {
            "text": "Subitem B2",
            "value": "subitem-b2"
          },
          {
            "text": "Subitem B3",
            "value": "subitem-b3"
          }
        ]
      }
    },
    {
      "text": "Item C",
      "id": "item-c",
      "sub": {
        "items": [
          {
            "text": "Subitem C1",
            "value": "subitem-c1",
            "sub": {
              "items": [
                {
                  "text": "SubSubitem C1.1",
                  "value": "subsubitem-c1-1"
                },
                {
                  "text": "SubSubitem C1.2",
                  "value": "subsubitem-c1-2"
                },
                {
                  "text": "SubSubitem C1.3",
                  "value": "subsubitem-c1-3"
                }
              ]
            }
          },
          {
            "text": "Subitem C2",
            "value": "subitem-c2"
          },
          {
            "text": "Subitem C3",
            "value": "subitem-c3"
          }
        ]
      }
    }
  ]
}) }}