Schede
Interfaccia a schede accessibile per organizzare contenuti in pannelli. Disponibile in stili visivi multipli con navigazione completa da tastiera.
Sottolineato
Schede pulite sottolineate con indicatore a bordo inferiore
_tabs.html.erb
███
████ █████████ █ █████████ █████ █████████
██████
███ ██████ ████████████████████████████ █████ █
█ ███ ███████ ██████ ████████ ████████ ████████ ███ █████ ████ ██
█ ███ ███████ ██████ █████████ ████████ ████████ ███ ██████ ████ █
█ ██
██
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
tabs_underline_component.html.erb
████ ██████████ █████████████████ ███ ██████████████████████ ██████████████████████████ ███████████ ████
████ ███████████ █████ ████████ ████████████████ ███████████████ ██████████████████████ ██████████████ ██████████████████████████████
██ ████████████████████ ██ █████ ██████ ██
███████
█████████████
██████████
███████ ██████ ███████
██████████████████ ██████ █████████
██████████████████ █████ ██ ███████████ ███
█████████████ █████ ██ ███████████ █ █ █ ██ ███
tabs_underline_component.rb
█ ██████████████████████ ████
█████ ██████████████████████ █ ███████████████████
████████████ ██████ ██████████████
███ ███████████████████████ ██ ████████████████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
Pills
Pulsanti scheda a forma di pillola con sfondi arrotondati
_tabs.html.erb
███
████ █████████ █ █████ █████ █████████
██████
███ ██████ ████████████████████████ █████ █
█ ███ ███████ ██████ ████████ ████████ ████████ ███ █████ ████ ██
█ ███ ███████ ██████ █████████ ████████ ████████ ███ ██████ ████ █
█ ██
██
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
tabs_pills_component.rb
█ ██████████████████████ ████
█████ ██████████████████ █ ███████████████████
████████████ ██████ ██████████████
███ ███████████████████████ ██ ████████████████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
tabs_pills_component.html.erb
████ ██████████ █████████████████ ███ ██████████████████████ ██████████████████████████ ███████████ ████
████ ███████████ █████ ███ ████████████ ██████████ ███████████████ ██████████████████ ██████████████ ██████████████████████████████
██ ████████████████████ ██ █████ ██████ ██
███████
█████████████
██████████
███████ ██████ ███████
██████████████████ ██████ █████████
██████████████████ █████ ██ ███████████ ███
█████████████ █████ ██ ███████████ █ █ █ ██ ███
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
Riquadrato
Schede stile card con contenitore bordato
_tabs.html.erb
███
████ █████████ █ █████ █████ █████████
██████
███ ██████ ████████████████████████ █████ █
█ ███ ███████ ██████ ████████ ████████ ████████ ███ █████ ████ ██
█ ███ ███████ ██████ █████████ ████████ ████████ ███ ██████ ████ █
█ ██
██
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
tabs_boxed_component.html.erb
████ ██████████ █████████████████ ███ ██████████████████████ ██████████████████████████ ███████████ ████
████ ███████████ ███████████ ████████ ████████████████ ███████████████ █████████████████ ██████████████████████ ██████████████ ██████████████████████████████
██ ████████████████████ ██ █████ ██████ ██
███████
█████████████
██████████
███████ ██████ ███████
██████████████████ ██████ █████████
██████████████████ █████ ██ ███████████ ███
█████████████ █████ ██ ███████████ █ █ █ ██ ███
tabs_boxed_component.rb
█ ██████████████████████ ████
█████ ██████████████████ █ ███████████████████
████████████ ██████ ██████████████
███ ███████████████████████ ██ ████████████████
████████████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
tabs_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████ ████████
██████ ██████ █ █
██████ █ █████ ███████ ████████ █ █
█
█████████ █
Registro delle modifiche
- v1.1.0: Added multiple style variants (underline, pills, boxed)
- v1.0.0: Initial release with horizontal tabs
- Full keyboard accessibility (arrow keys, home/end)
- Stimulus controller for state management
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora