Skip to main content

Toggle Buttons

Uso

Los toggle_buttons se pueden utilizar para agrupar opciones relacionadas. Para enfatizar grupos de toggle buttons relacionados, un grupo debe compartir un contenedor común.

Acción seleccionada

Solo se puede seleccionar y activar una opción en un grupo de botones de alternancia a la vez. Al seleccionar una opción, se anula la selección de cualquier otra.

Playground

<%= toggle_buttons f,
:save_attribute,
join_buttons: false do |w|
// opciones de ejemplo
options = [
{ 'value' => 1, 'name' => 'Very Bad', 'isChecked' => false },
{ 'value' => 2, 'name' => 'Bad', 'isChecked' => false },
{ 'value' => 3, 'name' => 'Neutral', 'isChecked' => true },
{ 'value' => 4, 'name' => 'Good', 'isChecked' => false },
{ 'value' => 5, 'name' => 'Very Good', 'isChecked' => false }
]
options.each do |option|
w.item "id_#{option}",
option['value'],
checked: option['isChecked'],
disabled: false,
required: false,
tooltip: option['name']
end
end %>

Lista de parámetros

ParámetroTipoDetalle
formObjectFormulario que usa el componente
attributeSymbolAtributo del formulario donde guardar el dato
min_labelStringLabel del valor mínimo de la escala
max_labelStringLabel del valor máximo de la escala
join_buttonsBoolean, default: trueSi los botones están unidos o separados entre ellos
itemitem de listPropiedades que se asignaran al radio_button posterior

items

ParámetroTipoDetalle
idStringid del item
valueStringvalor del item
checkedBoolean, default: falsesi el item estará checked por defecto
disabledBoolean, default: falsesi el item estará disabled por defecto
requiredBoolean, default: falsesi el item estará required por defecto
tooltipString, default: emptyClase del botón checked:false
message

Hola 👋

Evalúa tu experiencia utilizando nuestro Design System

Déjanos un comentario