Componentes Índice de páginas
Paginación
Navegación
La paginación se emplea cuando dividimos el contenido de una página para no abrumar, esto dará una idea de qué cantidad de información está disponible y permitirá saltar fácilmente entre las páginas.
Pagination
Mostrar parámetros
Parámetros del componente
params:
- name: id
type: string
required: true
description: The id of the pagination.
- name: hasSelect
type: boolean
required: false
description: If true, the pagination appearance shows a select to select active page instead of a button group.
- name: ariaLabel
type: string
required: true
description: String to add an aria-label to the nav.
- name: classesContainer
type: string
required: false
description: Classes to add to the container div.
- name: totalItems
type: string
required: true
description: Total number of items.
- name: itemsPerPage
type: string
required: true
description: Number of items per each page.
- name: showPrevious
type: boolean
required: false
description: If true, shows the Previous button if hasSelect is true. Defaults to true.
- name: hasPrevious
type: boolean
required: false
description: If false, the Previous button is disabled. Defaults to true.
- name: previousText
type: string
required: false
description: Text for the previous button. Defaults to "Anterior".
- name: showNext
type: boolean
required: false
description: If true, shows the Next button if hasSelect is true. Defaults to true.
- name: hasNext
type: boolean
required: false
description: If false, the Next button is disabled. Defaults to true.
- name: nextText
type: string
required: false
description: Text for the previous button. Defaults to "Siguiente".
- name: showFirst
type: boolean
required: false
description: If true, shows the First button if hasSelect is true. Defaults to false.
- name: hasFirst
type: boolean
required: false
description: If false, the First button is disabled. Defaults to true.
- name: firstText
type: string
required: false
description: Text for the first button. Defaults to "Primera".
- name: showLast
type: boolean
required: false
description: If true, shows the Last button if hasSelect is true. Defaults to false.
- name: hasLast
type: boolean
required: false
description: If false, the Last button is disabled. Defaults to true.
- name: lastText
type: string
required: false
description: Text for the last button. Defaults to "Última".
- name: itemsPerPageSelector
type: object
required: false
description: Options for a select component to choose number of items per page.
- name: label
type: object
required: true
description: Label text or HTML by specifying value for either text or html keys.
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
- name: html
type: string
required: true
description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
- name: classes
type: string
required: false
description: Classes to add to the element that acts as label.
- name: items
type: array
required: true
description: Array of items objects.
params:
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
- name: html
type: string
required: true
description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
- name: id
type: string
required: false
description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
- name: active
type: boolean
required: false
description: If true, item will be active.
- name: classes
type: string
required: false
description: Classes to add to the item.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the item.
- name: items
type: array
required: true
description: Array of items objects.
params:
- name: href
type: string
required: true
description: Item link.
- name: active
type: boolean
required: false
description: If true, item will be active.
- name: classes
type: string
required: false
description: Classes to add to the item.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the item.
- name: classes
type: string
required: false
description: Classes to add to the pagination nav container tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the pagination nav container tag.
Por defecto #
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"
}
}) }}
HTML
<!-- 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 -->
Estilo select #
Usa el parámetro "hasSelect": true
para mostrar la paginación como un Select en vez de botones.
Selecciona para cargar datos automáticamente
Posición de paginación: 10 - 20 de 64
Mostrar códigodel ejemplo: Estilo select
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "select-style",
"hasSelect": true,
"idPrefix": "pagination-has-select",
"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
},
{
"value": "7",
"text": 7
},
{
"value": "8",
"text": 8
},
{
"value": "9",
"text": 9
},
{
"value": "10",
"text": 10
},
{
"value": "11",
"text": 11
},
{
"value": "12",
"text": 12
},
{
"value": "13",
"text": 13
},
{
"value": "14",
"text": 14
}
],
"previousText": "Anterior",
"nextText": "Siguiente",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="select-style" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="select-style-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-has-select-previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" />
</svg> <span class="sr-only">Página </span>
Anterior<span class="sr-only">: Página 1 con los resultados del 0 al 10</span>
</button>
<!-- /button -->
<div class="flex flex-wrap items-center pl-sm">
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="select-style-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="select-style-listbox" name="select-style-listbox" aria-describedby="select-style-label">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-has-select-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 3 con los resultados del 20 al 30</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
</nav>
<p id="pagination-has-select-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 -->
Con página previa deshabilitada #
En este ejemplo "hasSelect": true
y "hasPrevious": false
Selecciona para cargar datos automáticamente
Posición de paginación: 0 - 10 de 64
Mostrar códigodel ejemplo: Con página previa deshabilitada
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "with-previous-page-disabled",
"hasSelect": true,
"idPrefix": "pagination-with-previous-page-disabled",
"totalItems": "64",
"itemsPerPage": "10",
"items": [
{
"value": "1",
"text": 1,
"selected": true
},
{
"value": "2",
"text": 2
},
{
"value": "3",
"text": 3
},
{
"value": "4",
"text": 4
},
{
"value": "5",
"text": 5
},
{
"value": "6",
"text": 6
}
],
"hasPrevious": false,
"previousText": "Anterior",
"nextText": "Siguiente",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="with-previous-page-disabled" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="with-previous-page-disabled-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--sm c-button--transparent mr-xs c-button--disabled" id="pagination-with-previous-page-disabled-previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" />
</svg> <span class="sr-only">Página </span>
Anterior
</button>
<!-- /button -->
<div class="flex flex-wrap items-center pl-sm">
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="with-previous-page-disabled-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="with-previous-page-disabled-listbox" name="with-previous-page-disabled-listbox" aria-describedby="with-previous-page-disabled-label">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-with-previous-page-disabled-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 2 con los resultados del 10 al 20</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
</nav>
<p id="pagination-with-previous-page-disabled-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>0 - 10 de 64
</p>
</div>
<!-- /pagination -->
Sin página previa #
En este ejemplo "hasSelect": true
y "showPrevious": false
Selecciona para cargar datos automáticamente
Posición de paginación: 0 - 10 de 64
Mostrar códigodel ejemplo: Sin página previa
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "without-previous-page",
"hasSelect": true,
"idPrefix": "pagination-without-previous-page",
"totalItems": "64",
"itemsPerPage": "10",
"items": [
{
"value": "1",
"text": 1,
"selected": true
},
{
"value": "2",
"text": 2
},
{
"value": "3",
"text": 3
},
{
"value": "4",
"text": 4
},
{
"value": "5",
"text": 5
},
{
"value": "6",
"text": 6
}
],
"showPrevious": false,
"previousText": "Anterior",
"nextText": "Siguiente",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="without-previous-page" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="without-previous-page-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<div class="flex flex-wrap items-center pl-sm">
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="without-previous-page-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="without-previous-page-listbox" name="without-previous-page-listbox" aria-describedby="without-previous-page-label">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-without-previous-page-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 2 con los resultados del 10 al 20</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
</nav>
<p id="pagination-without-previous-page-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>0 - 10 de 64
</p>
</div>
<!-- /pagination -->
Con página primera y última #
En este ejemplo "hasSelect": true
, "showFirst": true
y "showLast": true
Selecciona para cargar datos automáticamente
Página actual:
Posición de paginación: 10 - 20 de 64
Mostrar códigodel ejemplo: Con página primera y última
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "without-previous-page-disabled",
"hasSelect": true,
"idPrefix": "pagination-without-previous-page-disabled",
"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
}
],
"previousText": "Anterior",
"nextText": "Siguiente",
"showFirst": true,
"showLast": true,
"firstText": "Primera",
"lastText": "Última",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="without-previous-page-disabled" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="without-previous-page-disabled-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-without-previous-page-disabled-first">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<g>
<path d="M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z" fill="currentColor"></path>
<path d="M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z" fill="currentColor"></path>
</g>
</svg> <span class="sr-only">Página </span>
Primera<span class="sr-only">: Página 1 con los resultados del 0 al 10</span>
</button>
<!-- /button -->
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-without-previous-page-disabled-previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" />
</svg> <span class="sr-only">Página </span>
Anterior<span class="sr-only">: Página 1 con los resultados del 0 al 10</span>
</button>
<!-- /button -->
<div class="flex flex-wrap items-center w-full lg:w-auto pl-sm">
<p class="lg:hidden mr-xs text-sm text-neutral-dark">Página actual:</p>
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="without-previous-page-disabled-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="without-previous-page-disabled-listbox" name="without-previous-page-disabled-listbox" aria-describedby="without-previous-page-disabled-label">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-without-previous-page-disabled-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 3 con los resultados del 20 al 30</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-without-previous-page-disabled-last">
<span class="sr-only">Página </span>
Última<span class="sr-only">: Página 3 con los resultados del 20 al 30</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<g>
<path d="M13.58,12a2.64,2.64,0,0,1-.77,1.88L3.27,23.42a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.27.27,0,0,0,0-.36L.77,3.08A1.77,1.77,0,0,1,3.27.58l9.54,9.54A2.64,2.64,0,0,1,13.58,12Z" fill="currentColor"></path>
<path d="M23.75,12A2.65,2.65,0,0,1,23,13.88l-9.54,9.54a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.25.25,0,0,0,0-.36L10.93,3.08a1.77,1.77,0,0,1,2.5-2.5L23,10.12A2.65,2.65,0,0,1,23.75,12Z" fill="currentColor"></path>
</g>
</svg>
</button>
<!-- /button -->
</nav>
<p id="pagination-without-previous-page-disabled-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 -->
Con página primera deshabilitada y última #
En este ejemplo "hasSelect": true
, "hasPrevious": false
, "showFirst": true
y "hasFirst": false
Selecciona para cargar datos automáticamente
Página actual:
Posición de paginación: 0 - 10 de 64
Mostrar códigodel ejemplo: Con página primera deshabilitada y última
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "select-style-2",
"hasSelect": true,
"idPrefix": "pagination-has-select-2",
"totalItems": "64",
"itemsPerPage": "10",
"items": [
{
"value": "1",
"text": 1,
"selected": true
},
{
"value": "2",
"text": 2
},
{
"value": "3",
"text": 3
},
{
"value": "4",
"text": 4
},
{
"value": "5",
"text": 5
},
{
"value": "6",
"text": 6
},
{
"value": "7",
"text": 7
},
{
"value": "8",
"text": 8
},
{
"value": "9",
"text": 9
},
{
"value": "10",
"text": 10
},
{
"value": "11",
"text": 11
},
{
"value": "12",
"text": 12
},
{
"value": "13",
"text": 13
},
{
"value": "14",
"text": 14
}
],
"hasPrevious": false,
"previousText": "Anterior",
"nextText": "Siguiente",
"showFirst": true,
"showLast": true,
"hasFirst": false,
"firstText": "Primera",
"lastText": "Última",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="select-style-2" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="select-style-2-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--sm c-button--transparent mr-xs c-button--disabled" id="pagination-has-select-2-first">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<g>
<path d="M10.42,12a2.64,2.64,0,0,1,.77-1.88L20.73.58a1.77,1.77,0,0,1,2.5,2.5l-8.74,8.74a.27.27,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5l-9.54-9.54A2.64,2.64,0,0,1,10.42,12Z" fill="currentColor"></path>
<path d="M.25,12A2.65,2.65,0,0,1,1,10.12L10.57.58a1.77,1.77,0,0,1,2.5,2.5L4.33,11.82a.25.25,0,0,0,0,.36l8.74,8.74a1.77,1.77,0,0,1-2.5,2.5L1,13.88A2.65,2.65,0,0,1,.25,12Z" fill="currentColor"></path>
</g>
</svg> <span class="sr-only">Página </span>
Primera
</button>
<!-- /button -->
<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--sm c-button--transparent mr-xs c-button--disabled" id="pagination-has-select-2-previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" />
</svg> <span class="sr-only">Página </span>
Anterior
</button>
<!-- /button -->
<div class="flex flex-wrap items-center w-full lg:w-auto pl-sm">
<p class="lg:hidden mr-xs text-sm text-neutral-dark">Página actual:</p>
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="select-style-2-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="select-style-2-listbox" name="select-style-2-listbox" aria-describedby="select-style-2-label">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-has-select-2-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 2 con los resultados del 10 al 20</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="pagination-has-select-2-last">
<span class="sr-only">Página </span>
Última<span class="sr-only">: Página 2 con los resultados del 10 al 20</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<g>
<path d="M13.58,12a2.64,2.64,0,0,1-.77,1.88L3.27,23.42a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.27.27,0,0,0,0-.36L.77,3.08A1.77,1.77,0,0,1,3.27.58l9.54,9.54A2.64,2.64,0,0,1,13.58,12Z" fill="currentColor"></path>
<path d="M23.75,12A2.65,2.65,0,0,1,23,13.88l-9.54,9.54a1.77,1.77,0,0,1-2.5-2.5l8.74-8.74a.25.25,0,0,0,0-.36L10.93,3.08a1.77,1.77,0,0,1,2.5-2.5L23,10.12A2.65,2.65,0,0,1,23.75,12Z" fill="currentColor"></path>
</g>
</svg>
</button>
<!-- /button -->
</nav>
<p id="pagination-has-select-2-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>0 - 10 de 64
</p>
</div>
<!-- /pagination -->
Con itemsperpageselector #
Usa el parámetro itemsPerPageSelector
para mostrar un select que permite elegir el número de items por página, a la derecha.
Selecciona para cargar datos automáticamente
Posición de paginación: 10 - 20 de 64
Mostrar códigodel ejemplo: Con itemsperpageselector
Contenido
Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
"id": "with-items-per-page-selector",
"idPrefix": "with-items-per-page-selector",
"totalItems": "64",
"itemsPerPage": "10",
"hasSelect": true,
"itemsPerPageSelector": {
"items": [
{
"value": "10",
"text": "10",
"selected": true
},
{
"value": "25",
"text": "25"
},
{
"value": "50",
"text": "50"
},
{
"value": "75",
"text": "75"
},
{
"value": "100",
"text": "100"
}
]
},
"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
}
],
"hasPrevious": false,
"hasNext": true,
"previousText": "Anterior",
"nextText": "Siguiente",
"attributes": {
"aria-label": "Paginación"
}
}) }}
HTML
<!-- pagination -->
<div id="with-items-per-page-selector" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base">
<p id="with-items-per-page-selector-label" class="w-full mb-xs text-sm text-neutral-dark">
Selecciona para cargar datos automáticamente
</p>
<nav class="flex flex-wrap items-center flex-1 mb-base lg:mb-0 text-sm" aria-label="Paginación">
<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--sm c-button--transparent mr-xs c-button--disabled" id="with-items-per-page-selector-previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 mr-2" aria-hidden="true" focusable="false">
<path d="M54.87 71.77a2.5 2.5 0 010-3.54L106 17.07A10 10 0 1091.89 2.93L35.43 59.39a15 15 0 000 21.22l56.46 56.46A10 10 0 10106 122.93z" fill="currentColor" />
</svg> <span class="sr-only">Página </span>
Anterior<span class="sr-only">: Página 1 con los resultados del 0 al 10</span>
</button>
<!-- /button -->
<div class="flex flex-wrap items-center pl-sm">
<!-- select -->
<div class="c-form-group -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block sr-only" for="with-items-per-page-selector-listbox">Selecciona una página</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="with-items-per-page-selector-listbox" name="with-items-per-page-selector-listbox" aria-describedby="with-items-per-page-selector-label">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<!-- /select -->
</div>
<!-- button -->
<button class="c-button c-button--sm c-button--transparent mr-xs" id="with-items-per-page-selector-next">
<span class="sr-only">Página </span>
Siguiente<span class="sr-only">: Página 3 con los resultados del 20 al 30</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false">
<path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" />
</svg>
</button>
<!-- /button -->
</nav>
<div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
<!-- select -->
<div class="c-form-group flex flex-wrap place-items-baseline gap-xs -mt-sm mb-0 mr-xs">
<!-- label -->
<label class="block inline-block flex align-middle mb-[0]" for="items-listbox-with-items-per-page-selector">Items por página: </label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm c-select--transparent" id="items-listbox-with-items-per-page-selector" name="items-listbox-with-items-per-page-selector" aria-describedby="with-items-per-page-selector-label">
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</div>
<!-- /select -->
</div>
<p id="with-items-per-page-selector-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 -->