ProgressCircle
El componente ProgressCircle muestra un círculo de progreso visual que indica el avance de una tarea o porcentaje completado. Ofrece una opción para mostrar el porcentaje numérico en el centro del círculo.
Ejemplo
Importación
Para importar el componente ProgressCircle, se puede hacer desde fenextjs
import { ProgressCircle } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| className | string | no | '' | Clase CSS para personalizar el contenedor del componente ProgressCircle. |
| p | number | sí | N/A | Valor de progreso representado en el círculo, como un número entre 0 y 100. |
| showP | boolean | no | true | Indica si el valor numérico del progreso (p) se muestra en el centro del círculo. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- ProgressCircle básico
<ProgressCircle p={75} />- ProgressCircle con progreso visible
<ProgressCircle p={50} showP={true} />- ProgressCircle con clase personalizada
<ProgressCircle p={90} className="mi-clase" />