DESY

Sistema de Diseño del Gobierno de Aragón

Í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

Por defecto

Descripción visual

Componente de paginación con seis botones rectangulares alineados horizontalmente. El segundo botón tiene fondo azul claro con texto blanco, los demás tienen fondo blanco con bordes grises y texto gris oscuro. Texto indicador "10 - 20 de 64" alineado a la derecha en gris.

Posición de paginación: resultados del 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"
  }
}) }}

Estilo select

Usa el parámetro 'hasSelect': true para mostrar la paginación como un Select en vez de botones.

Descripción visual

Componente de paginación con dos menús desplegables(dropdowns) con bordes grises y flechas hacia abajo. Texto negro "Anterior" y "Siguiente" con números entre los dropdowns. Título "Seleccione para cargar datos automáticamente" en negro arriba, indicador "10 - 20 de 64" alineado a la derecha en gris.

Posición de paginación: resultados del 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"
  }
}) }}

Con página previa deshabilitada

En este ejemplo 'hasSelect': true y 'hasPrevious': false

Descripción visual

Componente de paginación con dos elementos interactivos separados por espaciado horizontal. Texto "Anterior" en gris claro con número "1" y flecha hacia abajo, texto "Siguiente" en azul con flecha hacia abajo. Título "Seleccione para cargar datos automáticamente" en negro arriba, indicador "0 - 10 de 64" alineado a la derecha en gris.

Posición de paginación: resultados del 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"
  }
}) }}

Sin página previa

En este ejemplo 'hasSelect': true y 'showPrevious': false

Descripción visual

Componente de paginación con fondo blanco y borde gris claro. Contiene texto instructivo en gris oscuro, botón numérico con fondo blanco, flecha "Siguiente" en azul enlace, y contador de rango en gris oscuro alineado a la derecha. Todos los elementos están distribuidos horizontalmente en una fila con espaciado uniforme.

Posición de paginación: resultados del 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"
  }
}) }}

Con página primera y última

En este ejemplo 'hasSelect': true, 'showFirst': true y 'showLast': true

Descripción visual

Componente de paginación con fondo blanco y borde gris claro. Incluye flecha "Primera" en azul enlace a la izquierda, flecha "Anterior" en azul enlace, botón numérico "2" con fondo blanco, flecha "Siguiente" en azul enlace, flecha "Última" en azul enlace, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro aparece arriba de los controles de navegación.

Posición de paginación: resultados del 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"
  }
}) }}

Con página primera deshabilitada y última

En este ejemplo 'hasSelect': true, 'hasPrevious': false, 'showFirst': true y 'hasFirst': false

Descripción visual

Componente de paginación con fondo blanco y borde gris claro. Presenta flecha "Primera" en gris claro deshabilitada, flecha "Anterior" en gris claro deshabilitada, botón numérico "1" con fondo blanco, flecha "Siguiente" en azul enlace activo, flecha "Última" en azul enlace activo, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro se ubica en la parte superior.

Posición de paginación: resultados del 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"
  }
}) }}

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.

Descripción visual

Componente de paginación con fondo blanco y borde gris de 1px. Contiene label negro alineado a la izquierda, dos selectores desplegables(numéricos con flechas azules) , texto negro indicando rango de resultados, y selector de ítems por página a la derecha con dropdown numérico. Todos los elementos están distribuidos horizontalmente en una sola fila con espaciado uniforme.

Posición de paginación: resultados del 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"
  }
}) }}