Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Pagination", versión: 4.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: 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>.
<!-- pagination -->
<div id="default" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<ul class="flex flex-wrap">
<li>
<!-- button -->
<button class="c-button mb-sm mr-sm" id="pagination-1">
<span class="sr-only">Página </span>1<span class="sr-only"> (resultados del 10 al 20)</span>
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--primary c-button--disabled mb-sm mr-sm c-button--disabled" id="pagination-2" aria-current="page" tabindex="-1">
<strong><span class="sr-only">Página </span>2<span class="sr-only"> (resultados del 20 al 30)</span></strong>
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button mb-sm mr-sm" id="pagination-3">
<span class="sr-only">Página </span>3<span class="sr-only"> (resultados del 30 al 40)</span>
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button mb-sm mr-sm" id="pagination-4">
<span class="sr-only">Página </span>4<span class="sr-only"> (resultados del 40 al 50)</span>
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button mb-sm mr-sm" id="pagination-5">
<span class="sr-only">Página </span>5<span class="sr-only"> (resultados del 50 al 60)</span>
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button mb-sm mr-sm" id="pagination-6">
<span class="sr-only">Página </span>6<span class="sr-only"> (resultados del 60 al 64)</span>
</button>
<!-- /button -->
</li>
</ul>
</nav>
<p id="pagination-status" class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark" role="status" aria-live="polite">
<span class="sr-only">Posición de paginación: </span>10 - 20 de 64
</p>
</div>
<!-- /pagination -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Pagination", versión: 4.0.0, 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/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "default",
"idPrefix": "pagination",
"totalItems": "64",
"itemsPerPage": "10",
"items": [
{
"value": "1",
"text": 1
},
{
"value": "2",
"text": 2,
"selected": true
},
{
"value": "3",
"text": 3
},
{
"value": "4",
"text": 4
},
{
"value": "5",
"text": 5
},
{
"value": "6",
"text": 6
}
],
"attributes": {
"aria-label": "Paginación"
}
}) }}Posición de paginación: 10 - 20 de 64
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "default",
"idPrefix": "pagination",
"totalItems": "64",
"itemsPerPage": "10",
"items": [
{
"value": "1",
"text": 1
},
{
"value": "2",
"text": 2,
"selected": true
},
{
"value": "3",
"text": 3
},
{
"value": "4",
"text": 4
},
{
"value": "5",
"text": 5
},
{
"value": "6",
"text": 6
}
],
"attributes": {
"aria-label": "Paginación"
}
}) }}