Theme:
Ui3nStepLineBar
Step line bar component for displaying progress through a series of steps.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
label* | string | — | Step label |
current* | number | 1 | Current step |
steps* | number | 1 | Total number of steps |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-step-line-bar-gap | 8px |
--ui3n-step-line-bar-label-font-size | 14px |
--ui3n-step-line-bar-label-line-height | 20px |
--ui3n-step-line-bar-label-offset | 16px |
--ui3n-step-line-bar-step-height | 4px |
Usage Examples
Simple step line bar
Simple step line bar
Basic step line bar with current step
Interactive step line bar
Interactive step line bar
Step line bar with navigation controls