Pular para o conte√ļdo principal

Pagination

Vis√£o geral#

O componente pagination √© utilizado para segmentar resultados em v√°rias p√°ginas, permitindo intera√ß√Ķes como: avan√ßar e retroceder entre as p√°ginas, ir para uma p√°gina espec√≠fica e tamb√©m controlar a quantidade de resultados exibidos em tela.

Quando usar#

Utilize-o quando existir muitos resultados para serem apresentados, como por exemplo, comumente visto em listagem de tabelas, resultados de pesquisas e diretórios.

Considere como muitos resultados mais de 25 itens a serem exibidos.

Anatomia#

De maneira geral, o pagination é composto por uma base, status, control e view, conforme descritos abaixo:

  • A base atua como um container para sustentar o espa√ßo dos elementos que comp√Ķe o componente;
  • O status, informa quantas p√°ginas est√£o sendo apresentadas atrav√©s de um texto;
  • O control, para navega√ß√£o entre as p√°ginas atrav√©s de bot√Ķes com √≠cones arrow left (seta para a esquerda) e arrow right (seta para a direita), al√©m de um text field para ir √† uma p√°gina espec√≠fica;
  • A view, define a quantidade de resultados desejados por p√°gina atrav√©s de um select;
  • E por fim, dois componentes divider, um entre status e control, e outro entre control e view.
Imagem representando o componente pagination com todos os seus elementos divididos em três terços; o primeiro sendo o status, segundo o control e terceiro a view, todos com suas respectivas características descritas no tópico de anatomia.
  1. Base
  2. Status
  3. Control
  4. View
  5. Divider
  6. Text field (number)
  7. Select

Varia√ß√Ķes#

O componente pagination contém a variação de dois formatos de apresentação: Full e Compact.

Full#

No formato full a base do componente apresenta todos os elementos da composição, conforme descrito na anatomia.

Imagem representando o componente pagination com todos os seus elementos divididos em três terços; o primeiro sendo o status, segundo o control e terceiro a view, todos com suas respectivas características descritas no tópico de anatomia.

Compact#

E no formato compact é apresentado apenas o elemento control ao centro, conforme também descrito na anatomia.

Imagem representando o componente pagination no formato compact composto apenas pelo control, com suas respectivas características descritas no tópico de anatomia.

Comportamento#

O text field localizado na parte do componente referenciada na anatomia por control, deve receber o tipo number, pois desse modo o comportamento do campo ocorre de acordo com um modelo mental j√° consolidado.

Estados:#

O componente prevê os seguintes estados:

  • Ativo;
  • Desativado;
  • Em foco;
  • Selecionado.

Ordem de foco#

Os elementos que possuem interação devem seguir a ordem lógica disposta em tela, conforme imagem à seguir:

Imagem representando o componente pagination com todos elementos que possuem intera√ß√£o sendo enfatizados, sendo estes os bot√Ķes, text field e select.
  1. Button (arrow left)
  2. Text field
  3. Button (arrow right)
  4. Select

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

Fazer#

  • Utilizar o formato compact em telas de tamanho reduzido;
  • Apresentar de forma clara qual p√°gina o usu√°rio est√° visualizando (Exemplo: "4 de 20 p√°ginas");
  • Em telas menores, recomenda-se apresentar no m√°ximo 7 p√°ginas incluindo os truncamentos;
  • Em telas maiores, recomenda-se apresentar 14 p√°ginas incluindo os truncamentos;
  • Utilizar uma √ļnica inst√Ęncia do componente por p√°gina;
  • Manter a posi√ß√£o do componente sempre no mesmo local (recomenda-se a parte inferior de uma p√°gina).

N√£o fazer#

  • N√£o utilizar se houver menos de 25 resultados a serem exibidos;
  • N√£o apresentar p√°ginas de forma aleat√≥ria;
  • Dentro do intervalo das p√°ginas, n√£o pular n√ļmeros;
  • N√£o considerar p√°ginas desabilitadas e afins.

Acessibilidade tratada no componente#

O componente pagination foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • A organiza√ß√£o estrutural de uma tela deve ser constru√≠da de forma que sua arquitetura de informa√ß√£o fa√ßa sentido tanto para quem v√™, quanto para quem ouve o conte√ļdo (1.3.1: Info and Relationships (A));
  • Seja qual for o m√©todo de intera√ß√£o, a apresenta√ß√£o das informa√ß√Ķes na tela sempre dever√° ter uma sequ√™ncia l√≥gica (1.3.2: Meaningful Sequence (A));
  • Todas as funcionalidades devem ser plaus√≠veis de acionamento via teclado, sem exce√ß√£o (2.1.3: Keyboard (No Exception) (A)(A)(A));
  • A ordem de foco deve acontecer em sequ√™ncia l√≥gica. Como por exemplo, quando n√£o tem nenhuma op√ß√£o selecionada, o foco deve mover-se para o primeiro item da lista (2.3.4: Focus Order (A));
  • Todos os t√≠tulos (diferentes n√≠veis) e r√≥tulos (campos de formul√°rios) devem descrever claramente a finalidade dos conte√ļdos ou agrupamentos nos elementos da tela, sem que haja ambiguidade em seu entendimento (2.4.6: Headings and Labels (A));
  • Preservar o foco vis√≠vel na navega√ß√£o via teclado (2.4.7: Focus Visible (A));
  • Utilizar nome, fun√ß√£o e valor adequadamente, pois estes par√Ęmetros s√£o utilizados por tecnologias assistivas para identificar os elementos da interface. Ao usar o tipo de input adequado para cada tipo de informa√ß√£o, tornam o formul√°rio mais acess√≠vel (4.1.2: Name, Role, Value (A)).