co-segmented-bar
Barra tipo píldora dividida en segmentos de color contiguos, útil para desgloses (por ejemplo, uso de almacenamiento). Es solo de presentación: los segmentos se definen en segments (JSON) y se miden contra total. Admite una leyenda externa vía slot="legend".
Ver código
<co-segmented-bar thickness="10" radius="full" total="15" segments='[{"value":2.4,"color":"var(--co-color-primary-azul)","label":"Documentos"},{"value":3.9,"color":"var(--co-color-primary-verde)","label":"Imágenes"},{"value":1.4,"color":"var(--co-color-primary-amarillo)","label":"Video"}]'></co-segmented-bar>Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|---|---|---|---|
radius | radius | "full" | "lg" | "sm" | 'full' | Corner rounding of the track. `full` = pill. |
segments | segments | CoSegment[] | string | '[]' | Segments to render — a JSON string OR an array of `{ value: number; color: string; label?: string }`. |
thickness | thickness | number | 10 | Track height in px. |
total | total | number | 100 | The value the segments are measured against (100% = full track). |
trackColor | track-color | string | 'var(--co-color-gray-100)' | Background color of the empty track. |
Eventos
Este componente no emite eventos personalizados.
Slots
Este componente no expone slots.
CSS Parts
| Part | Descripción |
|---|---|
::part(segment) | |
::part(segmented-bar) | |
::part(track) |
CSS Custom Properties
Este componente no expone CSS custom properties.