Pagination

Pagination percorre um conjunto conhecido e finito de páginas. Use-a abaixo de uma Table de registros quando páginas estáveis ajudarem a escanear; escolha carregar mais no lugar quando preservar a leitura importar.

Exemplos

Uma faixa de páginas truncada

Com mais de sete páginas, a faixa fica compacta: mostra as extremidades e os vizinhos da página atual. page começa em um, então mantenha alinhados o valor armazenado e o valor exibido.

Limite e rótulo da região

Anterior e próximo ficam desabilitados nos extremos. Dê à navegação um aria-label quando houver mais de uma região paginada na página; ele substitui o rótulo padrão "Pagination".

Quando usar

Use Pagination abaixo de uma Table ou outra lista de registros quando as pessoas precisarem voltar a uma página específica ou entender os limites do conjunto de resultados.

Prefira outro componente quando:

Os registros estão em colunas que as pessoas escaneiam e ordenam — combine Pagination com Table.
As pessoas devem continuar lendo um feed contínuo — carregue mais no lugar, em vez de realocá-las.
O conjunto completo é pequeno o bastante para aparecer de uma vez — renderize-o diretamente e evite controles de página.

Acessibilidade

Renderiza um <nav aria-label="Pagination">; seu aria-label substitui o padrão para regiões paginadas distintas.
Anterior e próximo são botões nativos chamados "Previous page" e "Next page" por padrão. Passe previousLabel e nextLabel para traduzi-los; eles ficam desabilitados na primeira e na última páginas.
A página ativa tem aria-current="page". Cada botão de página habilitado continua na ordem normal de Tab.
Reticências são spans com aria-hidden, não botões. Não faça uma lacuna de truncamento parecer acionável.

API e código

Nome	Tipo	Obrigatória	Descrição
`'aria-label'`	`string`	—	Accessible name for the navigation landmark. Default: `"Pagination"`.
`page`	`number`	Obrigatória	Current one-based page.
`total`	`number`	Obrigatória	Total number of pages.
`onChange`	`(page: number) => void`	—	Called with the requested one-based page.
`previousLabel`	`string`	—	Accessible name for the previous-page button. Default: `"Previous page"`.
`nextLabel`	`string`	—	Accessible name for the next-page button. Default: `"Next page"`.

Anterior é o primeiro botão na navegação; uma reticência é um span não interativo.

html

<nav class="lyra-pagination" aria-label="Pagination">
  <button class="lyra-page" type="button" aria-label="Previous page">‹</button>
  <button class="lyra-page" type="button">1</button>
  <span class="lyra-page lyra-page--gap" aria-hidden="true">…</span>
  <button class="lyra-page" type="button">5</button>
  <button class="lyra-page lyra-page--active" type="button" aria-current="page">6</button>
  <button class="lyra-page" type="button">7</button>
  <span class="lyra-page lyra-page--gap" aria-hidden="true">…</span>
  <button class="lyra-page" type="button">20</button>
  <button class="lyra-page" type="button" aria-label="Next page">›</button>
</nav>

<lyra:pagination> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`page`	—	Obrigatória	—
`total`	—	Obrigatória	—
`url`	—	Obrigatória	—
`previousLabel`	`'Previous page'`	—	—
`nextLabel`	`'Next page'`	—	—

blade

<lyra:pagination :page="3" :total="12" url="/projects?page={page}" previous-label="Previous page" next-label="Next page" />