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 |
|---|---|---|---|
| children* | Elementos hijos que se mostrarán dentro del componente. Element | Element[] | - | RAW children : {
props : {...} 1 key |
| addClass | Clase adicional para aplicar estilos personalizados. string | - | |
| max | Valor máximo permitido. number | Number.MAX_SAFE_INTEGER | |
| min | Valor mínimo permitido. number | Number.MIN_SAFE_INTEGER | |
| defaultValue | Valor por defecto. number | 0 | |
| step | Incremento de valor para cada paso. number | 1 | |
| onValue | Función que se llama cuando cambia el valor. ((counter: number) => void) | - | - |
| keepWithinRange | Indica si el valor debe mantenerse dentro del rango definido. boolean | false |
El componente NumberInput es similar a un input básico, pero está equipado con funcionalidades para incrementar o decrementar un número. Dado que está diseñado para su fácil modificación, cada parte fundamental de este está separada en un componente. Para su implementación, solo necesitas importar el componente <NumberInput />. Este incluye los componentes <NumberInput.Field />, <NumberInput.Stepper />, <NumberInput.IncrementStepper /> y <NumberInput.DecrementStepper />, necesarios para su uso. Haz clic en Show code en la parte inferior para ver y utilizar este ejemplo.
Utilizando las propiedades max, min y defaultValue, puedes controlar el rango de valores y el valor por defecto que manejará tu componente.
Por defecto, el componente puede salirse del rango de valores establecidos en las propiedades min y max. Sin embargo, utilizando la propiedad keepWithinRange, puedes cambiar este comportamiento, haciendo que el valor no pueda superar los límites establecidos.
Por defecto, los componentes <NumberInput.IncrementStepper/> y <NumberInput.DecrementStepper/> muestra una flecha en formato SVG. Pero puedes pasarle cualquier string, SVG o HTML para ser colocado dentro del botón que incrementa o decremeta el valor. Ten en cuenta que este elemento estará dentro de una etiqueta Button, por lo que no debes pasarle otro Button.