Groupe de bascules
Une rangée de boutons à bascule pour alterner entre des vues, filtres ou modes. Prend en charge les modes sélection unique (style radio) et sélection multiple (style case à cocher) avec navigation complète au clavier via les touches fléchées.
Contour
Boutons bordés en rangée avec remplissage à l'état actif. Épuré et professionnel.
_toggle_group.html.erb
███
██████ █████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_outline_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_outline_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Pilule
Boutons pilule arrondis avec arrière-plan subtil à l'état actif. Esthétique plus douce.
_toggle_group.html.erb
███
██████ █████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_pill_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_pill_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Journal des modifications
- v1.0.0: Initial release with outline and pill styles
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant