Pagination

Paginação (pagination) é um componente comum em sistemas corporativos, especialmente sendo usado em parceria com o DataTable, por vezes até sendo encarado como parte deste.

Entretanto, neste design system, optou-se por considerar um componente à parte, visto que poderia ser empregado em outras situações, bem como as tabelas de dados em si também podem ser utilizadas sem paginação em alguns cenários.

Variações

Este componente não possui variações, apenas se adaptando ao modo de cor em uso.

A aparência deste componente em modo claro:

A aparência deste componente em modo escuro:

Boas práticas

Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.

Exibição e comportamento

A paginação funciona como um wrapper de elementos e componentes:

• Um rótulo de texto descrevendo quais registros (normalmente de um DataTable acima da paginação) estão em exibição no momento, bem como o total geral de registros existentes independentemente de quanto estão em exibição.
• Botões de navegação para a primeira página de registros e para a página anterior à atualmente selecionada, sendo estes instâncias de componente Button em sua variação apenas com ícone.
• Botões de alternância numerados representando páginas especificas de registros que pode ser acessadas diretamente, sendo estes instâncias de componente ToggleButton.
• Botões de navegação para a próxima página à atualmente selecionada e para a última página de registros, sendo estes instâncias de componente Button em sua variação apenas com ícone.

Não é recomendado apresentar mais do que quatro botões de alternância para trocar de página ao mesmo tempo. Por isso, utiliza-se de rótulos com elipses (...) para demonstrar intervalos de páginas não sendo exibidos no momento.

O intervalo de páginas em exibição é dinâmico, de acordo com a página atualmente selecionada. Especialmente quando a primeira página está ativa, as páginas de 1 a 3 mais a última (n) são apresentadas. Especialmente quando a última página está ativa, as páginas de n-2 a n mais a primeira (1) são exibidas. Em todos os outros casos, rótulos com elipses demonstram a existância de páginas antes e depois do grupo de página em exibição, limitado a quatro páginas.

Em resoluções menores, pode não ser possível apresentar o rótulo de quantidade de registros exibidos e total antes da sequência de botões de ação para paginação. Nestes casos, recomenda-se inverter o rótulo e a paginação propriamente dita, para reposicionar o rótulo abaixo dos botões de paginação.

Acessibilidade

A paginação em si não é um elemento acionável pelo usuário e, portanto, não possui características especiais acessibilidade. Porém, cada Button e ToggleButton da paginação é um sub-componente acionável pelo usuário, exigindo todos os diferentes estados de interação adequadamente abordados quando em uso: :hover para movimentação do mouse sobre o sub-componente, :active para o exato momento em que se encontra pressionado ou tocado (no caso de uma tela sensível ao toque), :focus para quando a tela está sendo navegada através de teclado (normalmente pela tecla Tab), e :disabled evidentemente para quando se encontra desabilitado e não pode ser acionado.