<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/pagination/01_Paginado_VariacionesSimple.png';
import image2 from '../../stories/assets/pagination/02_Paginado_VariacionesAvanzado.png';
import image3 from '../../stories/assets/pagination/03_Paginado_VariacionesUnbound.png';
import image4 from '../../stories/assets/pagination/04_Paginado_VariacionesStandalone.png';
import image5 from '../../stories/assets/pagination/05_Paginado_Anatomia.png';
import image6 from '../../stories/assets/pagination/06_Paginado_Comportamiento.png';
import image7 from '../../stories/assets/pagination/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image7} width="150"/>


# Paginado / Pagination

El componente de paginado se usa cuando no se puede mostrar todos los elementos de un conjunto de elementos de contenido en una única página, y se ha de dividir el conjunto en varias páginas con controles que permitan entender la posición que se visualiza dentro del conjunto y navegar entre las páginas.

El paginado muestra información diversa sobre el conjunto de elementos que proporciona claridad al usuario en la visualización de conjuntos amplios de contenidos, como el número de elementos mostrados por página, la numeración de los elementos mostrados y el número de la página mostrada.

El número máximo de elementos mostrados es configurable y depende tanto del contexto, esto es de la presencia del conjunto de elementos en relación con el resto de los elementos de la página, como del formato del contenido, pudiendo ser distinto para filas de una tabla, para colecciones de tarjetas según el tamaño…

### Variaciones

Existen variaciones de este componente relacionadas con distintas configuraciones del componente en función de la información que se muestra o con la imposibilidad de realizar ciertas acciones, desde la versión más simple a la más avanzada.

| **Paginado simple** |
| ------------------------------------------------------------ |
| <br/><img src={image1} width="700"/><br/> |
<br/>

| **Paginado avanzado** |
|-------------------------------------------------------------|
|<br/><img src={image2} width="700"/><br/>|

Así pues una variación sería si el usuario no tiene opción de modificar el número de elementos mostrados en cada página, con lo que no se tendría el primer elemento de selección de número de elementos.

Otra puede ser cuando no se conoce o no se desea mostrar el número total de elementos, con lo que no se presentaría el segundo elemento de elementos mostrados.

También hay casos en los que no se conoce o no se desea mostrar el número total de páginas, con lo que desaparece el elemento de cuenta de páginas totales.

Estas versiones de paginado se usan típicamente asociadas a tablas, y formando este componente parte de las mismas. Otras versiones de este componente permiten hacer un uso del mismo de una manera visualmente más desvinculada con el área de presentación de los elementos.

| **Paginado desconectado** (unbound paginator)  | **Paginado aislado** (standalone paginator)  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image3} width="180"/><br/>                               | <br/><img src={image4} width="500"/><br/>        |

Estas versiones de paginado permiten su uso de una manera más independiente al no compartir un fondo diferenciado con el área que muestra los elementos, y permite utilizarlo vinculado a áreas de contenidos menos estructuradas.

### Anatomía

El componente de paginado es un componente complejo que combina otros componentes más sencillos. Entre otros utilizará:

- Selector desplegable en línea para elegir el número de elementos por página
- Selector desplegable en línea para seleccionar la página que se visualiza
- Botones con icono de flechas de para la navegación a página «anterior» y «siguiente»

Estos elementos junto con los campos de visualización de información se combinan respetando las reglas genéricas de espaciado utilizando paddings de 16px y separadores de 1px y adaptando la anchura completa del componente a la estructura de la página, y en concreto al área donde se muestra el conjunto de elementos.

<img src={image5} width="700"/>

### Comportamiento

El usuario puede interactuar con el componente de la misma manera que usa el selector desplegable para configurar el número de elementos por página o para navegar a una página concreta.

Asimismo, puede usar los botones «anterior» y «siguiente» para navegar entre páginas. Estos botones no se mostrarán en la primera y última página respectivamente.

Los estados definidos para este componente son enabled, focus, select y disabled.

<img src={image6} width="700"/>


### Código

```
<pagination></pagination>
```


### Tokens

**Color**

| Class                          | Property         | Color token |
| :----------------------------- | :--------------- | :---------- |
| `.bx--pagination`              | background-color | `$ui-01`    |
| `.bx--pagination`              | border-top       | `$ui-03`    |
| `.bx--pagination__text`        | text color       | `$text-02`  |
| `.bx--pagination__button-icon` | fill             | `$icon-01`  |

**Tipografía**

| Class                   | Type token    |
| :---------------------- | :------------ |
| `.bx--pagination__text` | `$caption-01` |

**Estructura**

| Class                               | Property                    | Spacing token |
| :---------------------------------- | :-------------------------- | :------------ |
| `.bx--pagination`                   | height                      | –             |
| `.bx--pagination`                   | border                      | –             |
| `.bx--pagination`                   | padding-left, padding-right | `$spacing-05` |
| `.bx--pagination .bx--select-input` | padding-left, padding-right | `$spacing-05` |
| `.bx--pagination__button`           | height, width               | –             |
| `arrow`                             | icon size                   | –             |