No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


  

Switch

NameDescriptionDefaultControl
id
Identificador único para el interruptor.
string
-
label
Etiqueta asociada al interruptor.
string
"Default switch label"
size
Tamaño del interruptor.
"normal""small""big"
"normal"
addClass
Clase adicional para aplicar estilos personalizados.
string
-
isLabelVisible
Indica si la etiqueta es visible.
boolean
false

Stories

Default

El componente Switch es un input de tipo checkbox personalizado. Su funcionamiento base es el mismo, pero el cambio radica en su diseño. Haz clic en Show code en la parte inferior para ver y utilizar este ejemplo.

Has Label Visible

Por defecto, el label del componente se encuentra oculto, pero puedes cambiar este comportamiento usando la propiedad isLabelVisible.

Size

Para cambiar el tamaño del componente, puedes utilizar la propiedad size, que incluye 3 diferentes tamaños: small, normal y big. Sin embargo, si estos valores no se ajustan a tus requerimientos, puedes utilizar las propiedades CSS personalizadas --switch-width, --switch-height y --switch-thumb, que modifican tanto el alto como el ancho de tu componente.

Checked

Disabled

Con la propiedad disabled podemos deshabilitar el funcionamiento de nuestro componente.