Seitennavigation
Seitennavigationskomponente für Datensätze. Unterstützt nummerierte Seiten mit Auslassungslücken, einfache Vor-/Zurück-Navigation und Cursor-basierte Mehr-laden-Muster. Integriert sich mit Turbo Frames für nahtlose Seitenübergänge.
Nummeriert
Vollständige Seitennavigation mit Seitennummern, Auslassungslücken, Vor-/Zurück-Pfeilen und Einträge-pro-Seite-Auswahl
_pagination.html.erb
███
██████████ █████████ █ ████████ █████ █████████
██████
███ ██████ █████████████████████████████████
█████████████ ██
████████████ ███
█████████ █████████
████████████ █ ██
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_numbered_component.html.erb
████ ███████████████████████ ███████████ ████████████ ██████████████ ███████
███ ████████ █████ ██
██ ██ ██████████████ ██
█████ ██████████ ███████████████████████ ███ ████████████████████ ████████████████████ ██████
████ ██████████ ████ ███████████ █████████████████████ ██████████ █ ██ ███ ███████████████████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ ████ ██
██████
███████
██ ████ ██
██
pagination_numbered_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ █████████████████████████ █████████████ █████████ ████ ████████████ ████ ████████████ ██
█████████████ █ █████████████████
████████████ █ ████████████████
█████████ █ ████████
████████████ █ ███████████
████████████ █ ████████████████
███
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Einfach
Nur Vor-/Zurück-Schaltflächen mit Seite-X-von-Y-Text. Schlicht und minimal.
_pagination.html.erb
███
██████████ █████████ █ ██████ █████ █████████
██████
███ ██████ ███████████████████████████████
█████████████ ██
████████████ ███
█████████ ████████████████
█████████ ███████████████ ██
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_simple_component.html.erb
████ ███████████████████████ ███████████ ████████████ █████████████████
███ ████████ ██████ ██
██ ██ ██████████████ ██
█████ ██████████ ███████████████████████████ ███ █████████████████████
████ ██████████ ████ ███████████ █████████████████████ ██████████ █ ██ ███ ███████████████████
█████ ██████████████████████ ███████████████████████ ████████████████ ██████ ███████ ████ ██
██████
████████
███████
██ ████ ██
pagination_simple_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ █████████████████████████ █████████████ █████████ ████ █████████ ████ ████████████ ████
█████████████ █ █████████████████
████████████ █ ████████████████
█████████ █ ████████
█████████ █ ████████
████████████ █ ███████████
███
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Cursor
Mehr-laden-Schaltfläche mit optionalem automatischen Laden. Keine Seitennummern.
_pagination.html.erb
███
██████████ █████████ █ ██████ █████ █████████
██████
███ ██████ ███████████████████████████████
█████████ ███████████████████████
███████████████ █████ ████ ███████
██████████ █████ ██
████████
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
pagination_cursor_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
███ ████████████████████ ████ █████████████ █████████████ ███████████████ █████ ██████ ████████████ ████ ██████████ ██████
█████████ █ ████████
█████████████ █ ████████████
███████████████ █ ██████████████
████████████ █ ███████████
██████████ █ █████████
███
pagination_cursor_component.html.erb
████
████████████████████████████
██ ██ ██████████ ██████████████████████████████████████████ ███ ██
█
██ ██ █████████ ██
██
█████████ ████████ ███
██████████ ████████████████████████ ███
███████████████████████████████
████████████████████████████████████
pagination_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ██████████ █████████████
██████ ██████ █ █ ████████ ████████ █████████ ███████ █
█████████ █
██ ███████████████████ ██ █████████████████████ █
█████████████ █ ███ █████████████████████
Änderungsprotokoll
- v1.0.0: Initial release with numbered, simple, and cursor styles
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten