co-segmented-bar
This content is not available in your language yet.
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.