Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Nav", versión: 12.1.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>.
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-3">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Nav", versión: 12.1.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/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
"idPrefix": "nav-default",
"items": [
{
"href": "#",
"text": "Opción 1"
},
{
"href": "#",
"text": "Opción 2"
},
{
"href": "#",
"text": "Opción 3"
},
{
"href": "#",
"text": "Opción 4"
},
{
"href": "#",
"text": "Opción 5"
}
],
"attributes": {
"aria-label": "Navegación local"
}
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
"idPrefix": "nav-default",
"items": [
{
"href": "#",
"text": "Opción 1"
},
{
"href": "#",
"text": "Opción 2"
},
{
"href": "#",
"text": "Opción 3"
},
{
"href": "#",
"text": "Opción 4"
},
{
"href": "#",
"text": "Opción 5"
}
],
"attributes": {
"aria-label": "Navegación local"
}
}) }}