Paginação
Componente de navegação por páginas para conjuntos de dados. Suporta páginas numeradas com lacunas de reticências, navegação simples anterior/próximo e padrões de carregamento por cursor. Integra-se com Turbo Frames para transições de página fluidas.
Numerada
Paginação completa com números de página, lacunas de reticências, setas anterior/próximo e seletor de tamanho por página
_pagination.html.erb
███
██████████ █████████ █ ████████ █████ █████████
██████
███ ██████ █████████████████████████████████
█████████████ ██
████████████ ███
█████████ █████████
████████████ █ ██
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_numbered_component.html.erb
████ ███████████████████████ ███████████ ████████████ ██████████████ ███████
███ ████████ █████ ██
██ ██ ██████████████ ██
█████ ██████████ ███████████████████████ ███ ████████████████████ ████████████████████ ██████
████ ██████████ ████ ███████████ █████████████████████ ██████████ █ ██ ███ ███████████████████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ ████ ██
██████
███████
██ ████ ██
██
pagination_numbered_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ █████████████████████████ █████████████ █████████ ████ ████████████ ████ ████████████ ██
█████████████ █ █████████████████
████████████ █ ████████████████
█████████ █ ████████
████████████ █ ███████████
████████████ █ ████████████████
███
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Simples
Apenas botões Anterior/Próximo com texto página X de Y. Limpo e minimalista.
_pagination.html.erb
███
██████████ █████████ █ ██████ █████ █████████
██████
███ ██████ ███████████████████████████████
█████████████ ██
████████████ ███
█████████ ████████████████
█████████ ███████████████ ██
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_simple_component.html.erb
████ ███████████████████████ ███████████ ████████████ █████████████████
███ ████████ ██████ ██
██ ██ ██████████████ ██
█████ ██████████ ███████████████████████████ ███ █████████████████████
████ ██████████ ████ ███████████ █████████████████████ ██████████ █ ██ ███ ███████████████████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ ████ ██
██████
████████
███████
██ ████ ██
pagination_simple_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ █████████████████████████ █████████████ █████████ ████ █████████ ████ ████████████ ████
█████████████ █ █████████████████
████████████ █ ████████████████
█████████ █ ████████
█████████ █ ████████
████████████ █ ███████████
███
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Cursor
Botão Carregar mais com carregamento automático opcional. Sem números de página.
_pagination.html.erb
███
██████████ █████████ █ ██████ █████ █████████
██████
███ ██████ ███████████████████████████████
█████████ ███████████████████████
███████████████ █████ ████ ███████
██████████ █████ ██
████████
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_cursor_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ ████████████████████ ████ █████████████ █████████████ ███████████████ █████ ██████ ████████████ ████ ██████████ ██████
█████████ █ ████████
█████████████ █ ████████████
███████████████ █ ██████████████
████████████ █ ███████████
██████████ █ █████████
███
pagination_cursor_component.html.erb
████
████████████████████████████
██ ██ ██████████ ██████████████████████████████████████████ ███ ██
█
██ ██ █████████ ██
██
█████████ ████████ ███
██████████ ████████████████████████ ███
███████████████████████████████
████████████████████████████████████
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Changelog
- v1.0.0: Initial release with numbered, simple, and cursor styles
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora