Pular para o conteúdo principal

Pagination​

Componente Pagination

📘 Modo de Uso​

O componente de paginação (pagination) é utilizado para dividir grandes volumes de conteúdo ou dados em várias páginas. Ele melhora a usabilidade e o desempenho da interface ao exibir apenas uma parte do conteúdo por vez.

Use a paginação quando:

  • O conteúdo total for muito grande e difícil de carregar de uma só vez;
  • O usuário precisar ter controle explícito sobre a navegação entre páginas;
  • Houver necessidade de facilitar buscas e retornos a páginas específicas.

Para cenários contínuos (feeds, redes sociais), considere scroll infinito como alternativa.

🧩 Anatomia​

Anatomia

Elementos principais:

  • Célula numérica → indica a página específica.
  • Botões anterior/próximo → permitem navegar sequencialmente.
  • Indicadores (ex.: reticências) → sinalizam intervalos ocultos de páginas.

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.pagination

🎨 Variantes​

Estados​

Estados

Style​

Style

Border Radius​

Border Radius

Cell Type​

Cell Type

Action​

Action

📝 Observações​

  • Cada célula de paginação deve conter, no mínimo, 32px de width e, no máximo, 32px de height.
  • Na estrutura hierárquica, variações booleanas se cancelam entre si.
  • A propriedade isPage, em pagination/element/content, sempre estará acompanhada da propriedade action com o valor page.
    • Se action for alterado para next ou previous, isPage torna-se False (e, por consequência, isIndicator passa a ser True).
  • Em telas menores, recomenda-se reduzir a quantidade de páginas exibidas (mantendo início, fim e indicador de intervalo) para garantir legibilidade e usabilidade.