Gruppo interruttori
Una riga di pulsanti interruttore per passare tra viste, filtri o modalità. Supporta selezione singola (tipo radio) e selezione multipla (tipo casella di controllo) con navigazione completa da tastiera tramite tasti freccia.
Contorno
Pulsanti bordati in riga con riempimento dello stato attivo. Pulito e professionale.
_toggle_group.html.erb
███
██████ █████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_outline_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_outline_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Pill
Pulsanti pill arrotondati con sfondo leggero quando attivo. Estetica più morbida.
_toggle_group.html.erb
███
██████ █████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_pill_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_pill_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Registro delle modifiche
- v1.0.0: Initial release with outline and pill styles
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