Grupo de alternancia
Una fila de botones de alternancia para cambiar entre vistas, filtros o modos. Soporta selección única (tipo radio) y selección múltiple (tipo checkbox) con navegación completa por teclado usando teclas de flecha.
Contorno
Botones bordeados en fila con relleno en estado activo. Limpio y profesional.
_toggle_group.html.erb
███
██████ █████ █████████ █ ███████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_outline_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_outline_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Píldora
Botones redondeados tipo píldora con fondo sutil en estado activo. Estética más suave.
_toggle_group.html.erb
███
██████ █████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ ██████ ██████ █████ ██
█ ██████ ███████ ██████ ██████ ██
█ ██████ ████████ ██████ ███████ █
██ ██████ ██████ █████ ███████████ ██
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
toggle_group_pill_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
█████ █ █
███ █████ ██████ █████████
███ █████ ████ █████████
███ █████ ██████ ██████████
████████
███ ██████████████████ █████ ████████ █████ ████ ██████ ████ █████ ████ █████████ ██████ ████████████████
toggle_group_pill_component.html.erb
████ ██████████████████████████████
█████████████████████████████████ █████ ███
█████████████████████████████████████ ███████████████████████ ███
██████████ █████████████████ ███
████████████
██████████████████ ███████
██ ███████████ ██ ██████ ██
███████ █████████████
█████████████████████████████████
███████████████████████████████████████ ██████████████████████████████
toggle_group_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ██████████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ████████
██████ ██████ █ █
█████ █ █████ ███████ ████████ ████████ ██
█████████ █ █████ ██████ ████████ ██ █
█
Registro de Cambios
- v1.0.0: Initial release with outline and pill styles
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso