Paginação
A paginação tem a função de organizar conteúdo de dados em páginas sequenciais, trazendo maior usabilidade durante o consumo da informação pelo usuário.
Utilizamos a paginação quando o volume de dados carregados na tela for bastante extenso e houver a necessidade de organizá-lo em partes menores.
Detalhes do Componente
Setas de Navegação
- Constituem um Botão para esquerda e outro para direita.
- A cada clique, o usuário poderá navegar página por página de forma crescente ou decrescente (direita / esquerda).
Identificadores de Páginas
- Os Identificadores de Páginas também são interativos. O usuário poderá clicar diretamente na página para qual deseja acessar.
- Neste elemento só será permitido caracteres numéricos.
Botão Reticências
- O Botão de Reticências indica que há mais páginas entre o número inicial e final.
- Para acessar todas as páginas ocultas basta clicar no botão e acessá-las através de uma lista de seleção.
- Se a Lista for bastante extensa, deve-se utilizar Barra de Rolagem que por padrão deverá ser acionada quando existir uma lista acima de 4 itens a serem apresentados. No entanto, esse valor poderá ser personalizado de acordo com as necessidades visuais e técnicas do projeto.
Módulo de Exibição
- Este é um módulo opcional. O Componente de Paginação poderá ser configurado para exibi-lo ou não.
- Sua utilidade é oferecer ao usuário a possibilidade de configurar quantos itens deverão aparecer na listagem da paginação.
Módulo de Informação
- Este módulo é opcional e sua função é mostrar ao usuário o intervalo de páginas que está sendo exibido no momento e o total de páginas que existem na paginação.
Módulo de Atalho
- Este módulo também é opcional e sua função é oferecer ao usuário um atalho para acessar qualquer página.
- É exibido o número da página ativa e se o usuário clicar nele abrirá uma lista do componente de Seleção com todas as páginas restantes.
- Se a lista trouxer muitas páginas, deve-se utilizar a Barra de Rolagem.
Opções
Tipo Padrão
- É a paginação padrão, aparece sempre no final do conteúdo da tela.
- As páginas são acessadas rapidamente e são facilmente reconhecíveis aos usuários, a sequência dos Identificadores de Páginas ficam sempre visíveis na tela.
Tipo Contextual
- É utilizada integrada a outros componentes, como por exemplo Cartões ou Tabelas e visa controlar a sequência de paginação dos componentes aos quais se relacionam.
- Neste tipo, a Paginação apresenta apenas as Setas de Navegação, além de poder utilizar também o Módulo de Exibição, Módulo de Informação e o Módulo de Atalho.
- Neste tipo, apenas as Setas de Navegação são obrigatórias, os demais elementos são opcionais e poderão ser usados conforme a necessidade.
Exemplo de Paginação Tipo Contextual em Tabela
Exemplo de Paginação Tipo Contextual em Cards
Comportamentos
Número de Páginas Customizável
- O número de Identificadores de Páginas utilizados no componente de Paginação é customizável.
- Esta customização permite adequar melhor o componente em diversos espaços e resoluções diferenciadas.
Uso do Botão Reticências
- O Botão Reticências poderá ser utilizado:
- No Início - logo após a primeira página - Este aparecerá no início quando a configuração do número de páginas a serem exibidas for menor que o total de páginas e o Página Ativa estiver no intervalo de páginas próximo ao final.
- No Final - imediatamente antes da última página - Este aparecerá no final quando a configuração do número de páginas a serem exibidas for menor que o total de páginas e a Página Ativa estiver no intervalo de páginas próximo ao início.
- Em ambas situações - Este aparecerá no início e no final quando a configuração do número de páginas a serem exibidas for menor que o total de páginas e o Página Ativa estiver num intervalo de páginas intermediário.
Navegando por Páginas Subsequentes
- Ao selecionar uma página subsequente à página ativa, o componente de Paginação mantém sua configuração original, alterando apenas o número de página ativa.
A - A página ativa é a primeira e o usuário seleciona a segunda página;
B - O Pagination mantém a configuração original e altera a página selecionada para o Estado Ativo;
Navegando através do Botão Reticências
- Ao selecionar uma página através do Botão Reticências, o componente de Paginação trará nova configuração dos Identificadores de Páginas contendo o Identificador da Página Ativo centralizado ao Componente.
A - A página ativa é a primeira;
B - O usuário seleciona outra página através do Botão Reticências;
B - A paginação é reconfigurado exibindo a página ativa selecionada centralizada ao componente.
Número de caracteres
- Quando o número de caracteres no Identificador da Página for igual ou superior a 3, este deverá assumir o formato de pílula e crescerá na horizontal, caso a quantidade de caracteres aumente.
Diretrizes de uso
Paginação Vertical com Botão
- Quando houver a necessidade de uma navegação vertical e contínua, recomenda-se utilizar o componente Botão ao final da tela.
- Neste caso, a paginação ocorre como um comportamento, mas o componente utilizado é o Botão.
- O usuário clica no Botão e enquanto os dados são carregados, o Componente Loading substitui a lista. Após o carregamento dos dados, a lista é atualizada.