Ejemplo: "Con muchos niveles de profundidad", de código HTML, para maquetar el componente: "Tree", versión: 4.0.2, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- tree -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset aria-describedby="tree-item-nodes-with-many-depth-levels-hint">
<legend class="font-bold">
Selecciona organismo
</legend>
<!-- hint -->
<p id="tree-item-nodes-with-many-depth-levels-hint" class="block text-neutral-dark">Selecciona el organismo al que perteneces.</p>
<!-- /hint -->
<ul class="c-tree mt-base" id="tree-item-nodes-with-many-depth-levels" role="tree" data-module="c-tree">
<li id="tree-item-nodes-with-many-depth-levels-0" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-0-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-0-input">Item 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-0-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-0-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li id="tree-item-nodes-with-many-depth-levels-1" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-1-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-1-input">Item 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-1-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-1-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li id="tree-item-nodes-with-many-depth-levels-2" class="c-tree__item ml-4 focus:outline-none" role="treeitem" data-module="c-tree__item" aria-expanded="true">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="tree-item-nodes-with-many-depth-levels-2-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="tree-item-nodes-with-many-depth-levels-2-input">Item 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-0-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-0-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-1-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-1-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-tree-item-nodes-with-many-depth-levels-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-tree-item-nodes-with-many-depth-levels-2-2-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-tree-item-nodes-with-many-depth-levels-2-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-0-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1" role="treeitem" data-module="c-tree__item" aria-expanded="false">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-1-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2" role="treeitem" data-module="c-tree__item" aria-expanded="true">
<div class="w-full h-full">
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left">
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus">
<path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus">
<path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z" />
</svg>
</span>
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<ul role="group" class='c-tree__itemgroup'>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0-input" name="with-many-depth-levels" type="radio" value="subitem-1">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-0-input">Subitem 1</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1-input" name="with-many-depth-levels" type="radio" value="subitem-2">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-1-input">Subitem 2</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
<li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2" role="treeitem" data-module="c-tree__item">
<div class="block">
<div>
<div class="relative flex items-start py-xs">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2-input" name="with-many-depth-levels" type="radio" value="subitem-3">
</div>
<div class="flex-1 pt-0.5 leading-5">
<!-- label -->
<label class="block block relative -top-xs -left-8 pl-8 py-xs" for="sub-sub-sub-sub-tree-item-nodes-with-many-depth-levels-2-2-2-2-2-input">Subitem 3</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /tree -->
Ejemplo: "Con muchos niveles de profundidad", de código Nunjucks, para maquetar el componente: "Tree", versión: 4.0.2, del sistema de diseño DESY
Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/tree/_macro.tree.njk" import componentTree %}
{{ componentTree({
"name": "with-many-depth-levels",
"classes": "mt-base",
"fieldset": {
"legend": {
"text": "Selecciona organismo"
}
},
"hint": {
"text": "Selecciona el organismo al que perteneces."
},
"idPrefix": "tree-item-nodes-with-many-depth-levels",
"items": [
{
"text": "Item 1",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Item 2",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Item 3",
"expanded": true,
"sub": {
"items": [
{
"text": "Subitem 1",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Subitem 2",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Subitem 3",
"expanded": true,
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3",
"expanded": true,
"sub": {
"items": [
{
"text": "Subitem 1",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Subitem 2",
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
},
{
"text": "Subitem 3",
"expanded": true,
"sub": {
"items": [
{
"text": "Subitem 1",
"value": "subitem-1"
},
{
"text": "Subitem 2",
"value": "subitem-2"
},
{
"text": "Subitem 3",
"value": "subitem-3"
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}) }}