wiki-Counter
Counter
El componente Counter es un contador simple que permite incrementar o decrementar un valor numérico a través de dos botones: uno para sumar (+) y otro para restar (-). Es útil para interfaces de usuario donde se requiere la manipulación rápida de valores numéricos, como en configuraciones, formularios o aplicaciones de e-commerce.
Referencia de la API
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
className | string (opcional) | '' | Clase CSS adicional para aplicar al contenedor principal del componente. |
onAdd | (event: MouseEvent<HTMLDivElement>) => void | Requerido | Función que se ejecuta cuando se hace clic en el botón de sumar (+). |
onRest | (event: MouseEvent<HTMLDivElement>) => void | Requerido | Función que se ejecuta cuando se hace clic en el botón de restar (-). |
value | number | Requerido | Valor actual del contador que se muestra entre los botones de sumar y restar. |
aura-test | string (opcional) | 'aura-counter' | Identificador para pruebas automatizadas (por ejemplo, con herramientas como Cypress). |
style | CSSProperties (opcional) | {} | Estilo en línea para personalizar el diseño del contenedor principal. |
disabled | boolean (opcional) | false | Si es true, el componente estará deshabilitado y no se permitirá la interacción con los botones de sumar/restar. |
Ejemplo de Uso
import { useState } from 'react';
import { Counter } from '@auravant/ui-kit';
export const CounterExample = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter((prev) => prev + 1);
const decrement = () => setCounter((prev) => prev - 1);
return (
<Counter
value={counter}
onAdd={increment}
onRest={decrement}
disabled={counter === 0}
className="mi-clase"
style={{ border: '1px solid #ccc' }}
/>
);
};
Notas
-
Estado Controlado: El componente Counter no maneja su propio estado. Es un componente controlado que depende de los valores y funciones proporcionados a través de sus props (value, onAdd, y onRest).
-
Deshabilitación: Cuando la propiedad disabled es true, el contador no permite ninguna interacción, y los botones de sumar/restar estarán visualmente deshabilitados.
-
Personalización: Se pueden agregar clases personalizadas mediante el prop className y estilos en línea mediante el prop style. Esto permite una amplia personalización del componente.
-
Accesibilidad: Es importante asegurarse de que las funciones onAdd y onRest manejen eventos de forma adecuada para mantener la accesibilidad del componente.