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.
Name | Description | Default | Control |
---|---|---|---|
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 |
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.
Por defecto, el label del componente se encuentra oculto, pero puedes cambiar este comportamiento usando la propiedad isLabelVisible
.
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.
Con la propiedad disabled
podemos deshabilitar el funcionamiento de nuestro componente.