DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Menú vertical

Navegación

Se compone de un listado de elementos anidados que poseerán los enlaces a cada una de las secciones del sitio web en concreto. El número de páginas que puede contener es mayor que en el menú horizontal, ya que no está limitado en espacio. Podría compararse a un índice.

Tree

Por defecto

Descripción visual

Contenedor con borde gris claro de 1px y fondo blanco. Título "por defecto" en negro arriba, seguido de "Selecciona organismo" en negro tamaño mediano. Tres ítems con radio buttons circulares vacíos a la izquierda y labels "Item 1", "Item 2", "Item 3" 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

Contenedor con borde gris claro de 1px y fondo blanco. Título "tipo checkbox" en negro arriba, seguido de "Selecciona organismo" en negro tamaño mediano. Tres ítems con checkboxes cuadrados vacíos a la izquierda y labels "Item 1", "Item 2", "Item 3" 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

Contenedor con borde gris claro de 1px y fondo blanco. Título "tree navigation" en negro arriba. Tres ítems de texto "Item 1", "Item 2", "Item 3" en negro tamaño estándar, cada uno precedido por un símbolo "+" gris, 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

Lista de tres enlaces apilados verticalmente sobre fondo beige claro con borde gris. El primer enlace "Item 1" tiene texto verde azulado con subrayado, el segundo "Item 2 deshabilitado a sin href" tiene texto negro sin decoración, y el tercer "Item 3" tiene texto verde azulado con subrayado. Los enlaces tienen viñetas de lista con signo más (+) en verde azulado.

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

Lista de tres enlaces apilados verticalmente sobre fondo blanco con borde gris fino. Cada enlace muestra texto verde azulado con subrayado ("Item 1", "Item 2", "Item 3"). Los enlaces están precedidos por viñetas de lista con signo más (+) en verde azulado. El espaciado entre elementos es uniforme y compacto.

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

Lista de tres elementos apilados verticalmente sobre fondo blanco con borde gris fino. Contiene texto negro sin subrayado para "Item 1", "Item 2", "Item 3". Los elementos están precedidos por viñetas de lista negras en forma de cuadrados pequeños. El espaciado vertical entre elementos es uniforme y compacto.

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

Caja con borde gris claro conteniendo un 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 error. Lista de tres radio buttons deshabilitados en gris claro con labels en negro.

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

Caja con borde gris claro conteniendo un título en negrita negro y texto descriptivo en gris oscuro debajo. Lista de tres radio buttons deshabilitados en gris claro con labels en gris atenuado, precedidos por iconos de expansión tipo plus en 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

Caja con borde gris claro conteniendo un título en negrita negro y texto descriptivo en gris oscuro. Lista de tres radio buttons blancos con labels en negro, el segundo radio button está seleccionado con relleno negro. Cada item precedido por iconos de expansión tipo plus en gris.

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

Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro seguido de tres radio buttons con labels en negro y subtexto gris claro debajo de cada label. Radio buttons alineados verticalmente con espaciado uniforme.

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

Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro posicionado sobre el borde superior izquierdo. Tres radio buttons con labels en negro, alineados verticalmente con espaciado uniforme.

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

Grupo de radio buttons sin borde contenedor ni fondo visible. Tres radio buttons con labels en negro, alineados verticalmente con espaciado uniforme. Estructura visual minimalista sin elementos decorativos.

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

Estructura jerárquica con radio buttons circulares de borde gris. "Ítem 2" expandido muestra tres subitems anidados con mayor indentación izquierda. Texto negro en fuente sans-serif, fondo blanco, líneas verticales grises conectan elementos padre-hijo.

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

Árbol de cuatro niveles de profundidad con radio buttons circulares sin relleno. "Ítem 3" expandido muestra cascada de subitems con indentación progresiva hacia la derecha. Texto negro regular, líneas verticales grises indican jerarquía, fondo blanco contenedor con borde gris sutil.

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

Lista con checkboxes cuadrados de borde gris oscuro. "Subitem 2" bajo "Ítem 2" muestra checkbox azul con marca de verificación blanca (estado seleccionado). Texto negro peso normal, indentación consistente, fondo blanco, borde gris claro en contenedor exterior.

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, placeholder gris, e icono de lupa azul a la derecha. Debajo hay lista de tres ítems con bullets azules circulares, texto negro normal. Label superior en negro negrita, altura total aproximada 150px.

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. Lista de tres ítems con radio buttons vacíos, texto negro normal. Label superior en negro negrita, altura total aproximada 180px.

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, placeholder gris, e icono de lupa azul a la derecha. Lista desplegable tipo árbol con dos niveles: ítems principales con símbolos menos expandibles, subítems indentados con radio buttons vacíos. Label superior en negro negrita, altura total aproximada 250px, á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

Árbol de navegación con radio buttons circulares no seleccionados en color gris. Texto negro de peso normal para las opciones, organizadas jerárquicamente con indentación visual usando guiones. Fondo blanco con encabezado "Selecciona organismo" en negrita negro y subtexto gris claro.

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

Lista vertical de radio buttons circulares no seleccionados en color gris con labels en texto negro de peso normal. Cinco opciones numeradas del 1 al 5 alineadas verticalmente sin indentación. Fondo blanco con encabezado "Selecciona organismo" en negrita negro y subtexto gris claro debajo.

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

Estructura de lista con bullets cuadrados verdes en lugar de radio buttons circulares. Tres items con labels en texto negro de peso normal alineados verticalmente. Fondo blanco con encabezado "Selecciona organismo" en negrita negro sin subtexto adicional.

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

Componente tree con borde gris claro que contiene un título en texto negro normal, seguido de un subtítulo "Selecciona organismo" en texto negro pequeño. Tres radio buttons dispuestos verticalmente con labels "Item 1", "Item 2", "Item 3" en texto negro regular, espaciados uniformemente sobre fondo blanco.

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

Componente tree con borde gris claro que contiene un título en texto negro normal, seguido de un subtítulo "Selecciona organismo" en texto negro pequeño. Tres radio buttons dispuestos verticalmente con labels "Item 1", "Item 2", "Item 3" en texto negro regular, donde el primer radio button aparece sin seleccionar y los otros dos muestran estados visuales distintos sobre fondo blanco.

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

Componente tree con borde gris claro que contiene un título en texto negro normal, dos líneas de subtítulo donde la primera dice "Selecciona organismo" y la segunda "Selecciona el organismo al que perteneces." en texto gris pequeño. Tres radio buttons dispuestos verticalmente con labels "Item 1", "Item 2", "Item 3" en texto negro regular sobre fondo blanco.

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

Fieldset con borde gris de 1px y fondo blanco. Encabezado en negrita negro "lazy rendering" en la parte superior izquierda. Sección interna contiene texto descriptivo negro "Selecciona organismo" seguido de tres checkboxes sin marcar con labels negros "Ítem A", "Ítem B" e "Ítem C", dispuestos verticalmente con espaciado uniforme entre ellos.

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