Pagination

Navegação entre páginas com links para anterior e próxima.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add pagination --yes

O item pagination do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/pagination_component.rb
app/components/ui/pagination/content_component.rb
app/components/ui/pagination/item_component.rb
app/components/ui/pagination/link_component.rb
app/components/ui/pagination/previous_component.rb
app/components/ui/pagination/next_component.rb
app/components/ui/pagination/ellipsis_component.rb
app/components/ui/button_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/pagination_helper.rb
app/helpers/ui/button_helper.rb
app/helpers/ui/icon_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Os links usam o visual do Button: a página ativa usa a variante outline e recebe aria-current="page". Para usar com Pagy ou Kaminari, gere os href de verdade com eles.

<%= ui_pagination do %>
  <%= ui_pagination_content do %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_previous(href: "?page=1") %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "?page=2", active: true) { "2" } %>
    <% end %>

<%= ui_pagination do %>
  <%= ui_pagination_content do %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_previous(href: "?page=1") %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "?page=2", active: true) { "2" } %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_next(href: "?page=3") %>
    <% end %>
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::Pagination::LinkComponent.new(href: "?page=2", active: true) do %>
  2
<% end %>

Composição

Pagination (nav role="navigation" aria-label="pagination")
`-- Pagination::Content (ul)
    |-- Pagination::Item (li) > Pagination::Previous / Pagination::Link / Pagination::Next
    `-- Pagination::Item (li) > Pagination::Ellipsis

Exemplos

Padrão

Anterior/Próxima com rótulos acessíveis, a página ativa marcada com aria-current="page" e reticências decorativas.

<%= ui_pagination do %>
  <%= ui_pagination_content do %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_previous(href: "#") %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "#") { "1" } %>
    <% end %>

<%= ui_pagination do %>
  <%= ui_pagination_content do %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_previous(href: "#") %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "#") { "1" } %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "#", active: true) { "2" } %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_link(href: "#") { "3" } %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_ellipsis %>
    <% end %>
    <%= ui_pagination_item do %>
      <%= ui_pagination_next(href: "#") %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Helper	Argumentos	Notas
`ui_pagination` / `ui_pagination_content` / `ui_pagination_item`	—	Landmark `nav`, lista `ul` e itens `li`.
`ui_pagination_link`	`active: false`, `size: :icon`	Renderiza um `<a>` com visual de Button (outline quando ativo, ghost nos demais).
`ui_pagination_previous` / `ui_pagination_next`	—	Chevron + rótulo (oculto em telas pequenas); o bloco substitui o texto padrão.
`ui_pagination_ellipsis`	—	Decorativo, com texto `sr-only` "Mais páginas".