Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Listbox", versión: 14.0.0, 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>.
<!-- listbox -->
<div data-module="c-listbox" class="relative">
<div id="default-label" class="mb-sm">
<p>Esto es un label</p>
</div>
<button id="default-button" class="c-listbox" data-module="c-listbox-button" aria-haspopup="listbox" aria-labelledby="default-label default-button">
<span class="inline-flex self-center align-middle">Por defecto</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></button>
<div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-listbox-tooltip">
<ul id="default" data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" aria-labelledby="default-label">
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item">
Option 1
</li>
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-2">
Opción 2
</li>
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-3">
Opción 3
</li>
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-4">
Opción 4
</li>
<li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-selected="false" id="default-listbox-item-5">
Opción 5
</li>
</ul>
</div>
</div>
<!-- /listbox -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Listbox", versión: 14.0.0, 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/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
"id": "default",
"text": "Por defecto",
"label": {
"text": "Esto es un label"
},
"items": [
{
"href": "#",
"html": "Option 1"
},
{
"href": "#",
"text": "Opción 2"
},
{
"href": "#",
"text": "Opción 3"
},
{
"href": "#",
"text": "Opción 4"
},
{
"href": "#",
"text": "Opción 5"
}
]
}) }}Esto es un label
- Option 1
- Opción 2
- Opción 3
- Opción 4
- Opción 5
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/listbox/_macro.listbox.njk" import componentListbox %}
{{ componentListbox({
"id": "default",
"text": "Por defecto",
"label": {
"text": "Esto es un label"
},
"items": [
{
"href": "#",
"html": "Option 1"
},
{
"href": "#",
"text": "Opción 2"
},
{
"href": "#",
"text": "Opción 3"
},
{
"href": "#",
"text": "Opción 4"
},
{
"href": "#",
"text": "Opción 5"
}
]
}) }}