{{ isPt ? 'li-pagination cobre layouts inspirados no Limitless, templates customizados e a nova variação appearance="datatable" usada no rodapé do li-datatable.' : 'li-pagination covers Limitless-inspired layouts, custom templates, and the new appearance="datatable" variation used in the li-datatable footer.' }}

{{ isPt ? 'Versões bordered, flat, spaced e arredondadas.' : 'Bordered, flat, spaced, and rounded variants.' }}

{{ isPt ? 'Base para listagens tradicionais com números e links de navegação.' : 'Base variant for traditional listings with numbers and navigation links.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ borderedPage }} {{ isPt ? 'de' : 'of' }} 10

{{ isPt ? 'Versão mais limpa, com bordas suaves e foco visual no item ativo.' : 'Cleaner version with soft borders and visual emphasis on the active item.' }}

{{ isPt ? 'Janela ativa' : 'Active window' }}: {{ flatPage }}

{{ isPt ? 'Boa para cards, grids e áreas densas com menos espaço horizontal.' : 'Good for cards, grids, and dense areas with less horizontal space.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ spacedPage }}

{{ isPt ? 'Templates substituem os controles padrão por ícones do tema, mantendo o item ativo bem destacado.' : 'Templates replace the default controls with theme icons while keeping the active item emphasized.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ roundedPage }}

{{ isPt ? 'Combina paginação minimalista com resumo de registros, próximo ao layout do Limitless.' : 'Combines minimal pagination with a records summary, close to the Limitless layout.' }}

{{ isPt ? 'Mostrando' : 'Showing' }} {{ toolbarStart }} {{ isPt ? 'a' : 'to' }} {{ toolbarEnd }} {{ isPt ? 'de' : 'of' }} 120 {{ isPt ? 'itens' : 'items' }} {{ toolbarPage }} {{ isPt ? 'de' : 'of' }} 12

{{ isPt ? 'Links sem borda deixam o componente mais leve em toolbars e rodapés visuais.' : 'Borderless links make the component lighter in toolbars and visual footers.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ borderlessPage }}

{{ isPt ? 'Pagers, dots e links com aparência próxima às demos do Limitless.' : 'Pagers, dots, and links with a look close to the Limitless demos.' }}

{{ isPt ? 'Versão com apenas dois botões, útil para timelines, feeds ou histórico paginado.' : 'Version with only two buttons, useful for timelines, feeds, or paged history.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ simplePagerPage }}

{{ isPt ? 'Usa a variação linked para um pager leve com hover mais explícito.' : 'Uses the linked variation for a lightweight pager with more explicit hover.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ linkedPagerPage }}

{{ isPt ? 'Ícones de navegação com dots compactos para carrosséis, onboarding e etapas visuais.' : 'Navigation icons with compact dots for carousels, onboarding, and visual steps.' }}

{{ isPt ? 'Página atual' : 'Current page' }}: {{ dottedPage }}

{{ isPt ? 'Tamanhos e alinhamentos seguindo o mesmo padrão do Limitless.' : 'Sizes and alignments following the same Limitless pattern.' }}

{{ isPt ? 'A versão padrão suporta lg, default e sm sem precisar de classes extras fora da API do componente.' : 'The default version supports lg, default, and sm without extra classes outside the component API.' }}

{{ isPt ? 'A combinação variant="flat" com tamanhos diferentes resolve cenários de páginas compactas e cabeçalhos limpos.' : 'The variant="flat" combination with different sizes solves compact-page and clean-header scenarios.' }}

{{ isPt ? 'A variação spaced funciona melhor com pills arredondadas e áreas de navegação mais respiradas.' : 'The spaced variation works better with rounded pills and airier navigation areas.' }}

{{ isPt ? 'Alinhamento padrão para listas e blocos de conteúdo tradicionais.' : 'Default alignment for lists and traditional content blocks.' }}

{{ isPt ? 'Usa a API de alinhamento do componente para centralizar a navegação sem classes extras no template.' : 'Uses the component alignment API to center navigation without extra template classes.' }}

{{ isPt ? 'Adequado para footers e barras auxiliares em cards mais densos.' : 'Suitable for footers and helper bars in denser cards.' }}

{{ isPt ? 'Mesmo componente, com aparência específica para rodapés de tabela.' : 'Same component with a specific look for table footers.' }}

{{ isPt ? 'Mostrando' : 'Showing' }} {{ datatableStart }} {{ isPt ? 'a' : 'to' }} {{ datatableEnd }} {{ isPt ? 'de' : 'of' }} 96 {{ isPt ? 'registros' : 'records' }}

{{ isPt ? 'A demo acima replica a paginação agora usada dentro do li-datatable.' : 'The demo above reproduces the pagination now used inside li-datatable.' }}

<li-pagination
  appearance="datatable"
  variant="flat"
  linkClass="rounded"
  [collectionSize]="totalRecords"
  [pageSize]="10"
  [page]="page"
  [maxSize]="5"
  [rotate]="true"
  [ellipses]="false"
  [boundaryLinks]="true"
  (pageChange)="page = $event">
  <template liPaginationFirst>
    <i class="ph ph-arrow-line-left"></i>
  </template>
  <template liPaginationPrevious>
    <i class="ph ph-caret-left"></i>
  </template>
  <template liPaginationNext>
    <i class="ph ph-caret-right"></i>
  </template>
  <template liPaginationLast>
    <i class="ph ph-arrow-line-right"></i>
  </template>
</li-pagination>

{{ pageTitle }} {{ pageSubtitle }}

{{ isPt ? 'Layouts de paginação' : 'Pagination layouts' }}

{{ isPt ? 'Paginação com borda' : 'Bordered pagination' }}

{{ isPt ? 'Flat arredondado' : 'Flat rounded' }}

{{ isPt ? 'Spaced compacto' : 'Spaced compact' }}

{{ isPt ? 'Arredondada com ícones' : 'Rounded with icons' }}

{{ isPt ? 'Toolbar compacta' : 'Toolbar compact' }}

{{ isPt ? 'Paginação sem borda' : 'Borderless pagination' }}

{{ isPt ? 'Estilos de paginação' : 'Pagination styles' }}

{{ isPt ? 'Pager simples' : 'Simple pager' }}

{{ isPt ? 'Pager encadeado' : 'Linked pager' }}

{{ isPt ? 'Paginação pontilhada' : 'Dotted pagination' }}

{{ isPt ? 'Opções de paginação' : 'Pagination options' }}

{{ isPt ? 'Tamanhos com borda' : 'Bordered sizes' }}

{{ isPt ? 'Tamanhos flat' : 'Flat sizes' }}

{{ isPt ? 'Tamanhos spaced' : 'Spaced sizes' }}

{{ isPt ? 'Alinhamento à esquerda' : 'Left alignment' }}

{{ isPt ? 'Alinhamento central' : 'Center alignment' }}

{{ isPt ? 'Alinhamento à direita' : 'Right alignment' }}

{{ isPt ? 'Variação do Datatable' : 'Datatable variation' }}