Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Breadcrumbs", 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>.
<!-- breadcrumbs -->
<nav class="c-breadcrumbs" aria-label="Estás en: ">
<ol class="lg:grid lg:grid-cols-max-content-2 w-full items-baseline text-sm">
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black ">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black truncate" href="/section">
Sección
</a>
</li>
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black flex-1 font-semibold">
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-black font-semibold no-underline truncate" href="/section/sub-section" aria-current="page">
<strong>Sub-sección</strong>
</a>
</li>
</ol>
</nav>
<!-- /breadcrumbs -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Breadcrumbs", 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/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Sección",
"href": "/section"
},
{
"text": "Sub-sección",
"href": "/section/sub-section"
}
]
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
{{ componentBreadcrumbs({
"items": [
{
"text": "Sección",
"href": "/section"
},
{
"text": "Sub-sección",
"href": "/section/sub-section"
}
]
}) }}