Acordeão
Seções de conteúdo expansíveis para organizar informações. Disponível nas variantes básica (uma aberta), sempre aberta (múltiplas) e aninhada.
Básico
Apenas um item pode estar aberto por vez
_accordion.html.erb
███
█████████ █████████ █ █████ █████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
█ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
██████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ ████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
██████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ████ ████████████████
█████████████ █ ████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Sempre aberto
Vários itens podem estar abertos simultaneamente
_accordion.html.erb
███
█████████ █████████ █ ██████ ████ █████████
████████ █████ ███ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ███ ████████████████
█████████████ █ ███████████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Aninhado
Acordeão dentro de acordeão para conteúdo hierárquico
_accordion.html.erb
███
█████████ █████████ █ ██████ █████████
█████████ ██████ █████████ ███ ████████████ ████████
████ █████████████ ████ ██ █████ ██████ ███ █████ ██ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█
██████ ███████ ███████ ███
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████ ██████ █████████████ ██████████████ ██████████
█
███ ████████████████████████ ███ █████████████ ██ ████████████████
█████████████ █ ███████████████████
█████████████ █ ████████████
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Changelog
- v1.0.0: Initial release with basic, always-open, and nested variants
- Full keyboard accessibility
- Stimulus controller for state management
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora