Pagination
Navegação entre páginas de dados (Nuxt UI) — prev/next e páginas. O rodapé da index.
UPagination), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O Pagination navega entre páginas de um conjunto grande de registros. Aparece no rodapé da index, junto do range ("1–50 de 31.686") e do refresh — que são layout adjacente (toolbar), não parte do componente.
Uso em tela
Botões de anterior/próxima e de página, com bordas (showEdges) para o início/fim quando há muitas páginas. O range e o refresh ficam ao lado, à esquerda ou à direita. Mantenha a página atual e o tamanho de página persistidos ao trocar de view ou aplicar filtro — o usuário não deve perder o lugar.
No documento
Nas tabelas internas do documento (Históricos, Detalhes do item, Manuais…) o rodapé é: à esquerda o texto "0 of 20 row(s) selected." e à direita a paginação UPagination com show-edges + :sibling-count="1" (« ‹ 1 … 4 5 6 … 10 › »), size="sm", v-model:page. Config típica: :total="200" :items-per-page="20". Ver docs/documento-anatomia-me.md §6.
No código
UPagination — doc técnica em ui.nuxt.com/docs/components/pagination. Props usadas: v-model:page, total, items-per-page, sibling-count, show-edges, size.
Acessibilidade
- Está num landmark de navegação (
<nav aria-label="Paginação">); a página atual usaaria-current="page"— não só a cor. - Botões anterior/próxima e de página com nome acessível (ex.: "Página 4", "Próxima página").
- O range ("1–50 de 31.686") é anunciado por
aria-liveao mudar de página. - Teclado: todos os controles focáveis e acionáveis; foco visível; alvo ≥ 44px.