Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Elementos de interfaz Componentes Paginación

Paginación

La paginación se utiliza para dividir el contenido o los datos en varias páginas, con un control para navegar a la página anterior o siguiente. Generalmente, se usa si hay más de X elementos mostrados en una vista y el número predeterminado que se muestra variará según el contexto.

Vista previa

Vista previa del componente paginación

Usos

Como usar

En pantallas con listados y tablas. En pantallas con más de 10 elementos mostrados en una tabla o listado.

Como no usar

Si la información es reducida.

Comportamiento

Indicadores y acciones

Visualización del componente paginación para mostrar el número de páginas y elementos

Nº de páginas y de elementos

Visualización del componente paginación para seleccionar el número de elementos por página

Elementos por página

Visualización del componente paginador

Acciones de navegación

Responsive

Visualización del componente paginación para móvil

Mobile

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Los números de página se encapsulan en un listado con role=”list”. Cada número de página tiene role=”listitem”. Los números de página y flechas tienen la propiedad title para indicar el significado de cada botón.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web