Fisarmonica
Sezioni di contenuto espandibili per organizzare le informazioni. Disponibile nelle varianti base (apertura singola), sempre aperta (aperture multiple) e nidificata.
Base
Un solo elemento può essere aperto alla volta
_accordion.html.erb
███
█████████ █████████ █ █████ █████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
█ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
██████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ ████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
██████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ████ ████████████████
█████████████ █ ████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Sempre aperto
Più elementi possono essere aperti contemporaneamente
_accordion.html.erb
███
█████████ █████████ █ ██████ ████ █████████
████████ █████ ███ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ███ ████████████████
█████████████ █ ███████████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Nidificato
Fisarmonica dentro una fisarmonica per contenuti gerarchici
_accordion.html.erb
███
█████████ █████████ █ ██████ █████████
█████████ ██████ █████████ ███ ████████████ ████████
████ █████████████ ████ ██ █████ ██████ ███ █████ ██ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█
██████ ███████ ███████ ███
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████ ██████ █████████████ ██████████████ ██████████
█
███ ████████████████████████ ███ █████████████ ██ ████████████████
█████████████ █ ███████████████████
█████████████ █ ████████████
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Registro delle modifiche
- v1.0.0: Initial release with basic, always-open, and nested variants
- Full keyboard accessibility
- 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