Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Links List", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- links-list -->
<nav data-module="c-links-list" aria-label="Menú destacado">
<ul class="divide-y divide-neutral-base">
<li class="relative px-base">
<a id="default-1" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div data-element="c-links-list__text" class="flex-1">
Item 1
</div>
</div>
<div class="self-center h-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path>
</svg>
</div>
</a>
</li>
<li class="relative px-base">
<a id="default-2" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div data-element="c-links-list__text" class="flex-1">
Item 2
</div>
</div>
<div class="self-center h-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path>
</svg>
</div>
</a>
</li>
<li class="relative px-base">
<a id="default-3" href="#" class="c-link flex justify-between items-center gap-base flex-1 py-base">
<div class="flex gap-base justify-between items-center flex-1">
<div data-element="c-links-list__text" class="flex-1">
Item 3
</div>
</div>
<div class="self-center h-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path>
</svg>
</div>
</a>
</li>
</ul>
</nav>
<!-- /links-list -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Links List", versión: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "default",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menú destacado"
}
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
{{ componentLinksList({
"idPrefix": "default",
"items": [
{
"href": "#",
"text": "Item 1"
},
{
"href": "#",
"text": "Item 2"
},
{
"href": "#",
"text": "Item 3"
}
],
"attributes": {
"aria-label": "Menú destacado"
}
}) }}