componente · @solu30/ui-kit/display
ProgressRing
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { ProgressRing } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| value | sí | number | 0-100. |
| size | opcional | number | Diameter in px. Default 40. |
| strokeWidth | opcional | number | — |
| className | opcional | string | Tokenized text-color class for the fill arc. Default `text-primary`. |
| trackClassName | opcional | string | Tokenized text-color class for the track. Default `text-content/10`. |
| children | opcional | ReactNode | Centered content (e.g. a percentage label or icon). |
Ejemplo del paquete
<ProgressRing value={72} size={48}>
<span className="text-xs font-semibold">72%</span>
</ProgressRing>Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.