componente · @solu30/ui-kit/display
CapacityBar
El componente, montado
Cargando el espécimen…
Cargando el chunk del paquete instalado…
De dónde se importa
import { CapacityBar } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| used | sí | number | — |
| total | sí | number | — |
| label | opcional | string | — |
| showCount | opcional | boolean | — |
| showPercent | opcional | boolean | — |
| thresholds | opcional | { | Breakpoints de porcentaje, SIEMPRE ascendentes (`warn < critical`) independientemente de `direction` — el shape no cambia entre modelos, solo qué color se pinta en cada tramo: - `fill-is-bad`: `[0, warn)` verde · `[warn, critical)` amarillo · `[critical, 100]` rojo. - `fill-is-good`: `[0, warn)` rojo · `[warn, critical)` amarillo · `[critical, 100]` verde. Ej. completitud 85/60 (≥85 verde, ≥60 amarillo, <60 rojo): `direction="fill-is-good"` + `thresholds={{ warn: 60, critical: 85 }}`. |
| warn | sí | number | — |
| critical | sí | number | — |
| direction | opcional | CapacityBarDirection | — |
| disableAnimation | opcional | boolean | — |
| className | opcional | string | — |