DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de páginas

Paginació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"
  }
}) }}

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"
  }
}) }}

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"
  }
}) }}

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"
  }
}) }}

Con página primera y última

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

Selecciona para cargar datos automáticamente

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"
  }
}) }}

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

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"
  }
}) }}

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"
  }
}) }}