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

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

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

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.

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.

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.

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

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

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

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

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

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

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

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

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.

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

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

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.

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.

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

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.

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.

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.

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.

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.

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