HorizontalStackedProgress

Stacked progress.

Example

Props

🕹️ standard props
progresses
(number | ProgressItem)[]
An array of progress items or values to display.
[]
labelVisible
boolean
Controls the visibility of the label.
true
labelValueVisible
boolean
Controls the visibility of the label value.
true
labelTextVisible
boolean
Controls the visibility of the label text.
true
legendVisible
boolean
Controls the visibility of the legend.
false
legendValueVisible
boolean
Controls the visibility of the legend values.
true
legendTextVisible
boolean
Controls the visibility of the legend text.
true
hideLabelUnderPercentage
number
Percentage threshold to hide labels.
undefined
tooltipVisible
boolean
Controls the visibility of the progress bar tooltip
true
🎨 style props
--horizontal-stacked-progress-gap
size
Gap between stacked progress bars.
4px
--horizontal-stacked-progress-dot-height
size
Height of the dot representing progress.
10px
--horizontal-stacked-progress-dot-width
size
Width of the dot representing progress.
10px
--horizontal-stacked-progress-dot-min-width
size
Minimum width of the dot representing progress.
10px
--horizontal-stacked-progress-label-gap
size
Gap between label and progress bar.
12px
--horizontal-stacked-progress-legend-margin-top
size
Margin top for the legend.
8px
--horizontal-stacked-progress-label-font-size
size
Font size for the label of the progress
.8rem
--horizontal-stacked-progress-label-font-weight
size
Font weight for the label of the progress
300
--horizontal-stacked-progress-value-font-size
size
Font size for the value of the progress
1.1rem
--horizontal-stacked-progress-value-font-weight
size
Font weight for the value of the progress
700

Slots

No data available

Events

No data available