mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
105 lines
3.3 KiB
Plaintext
105 lines
3.3 KiB
Plaintext
---
|
|
title: Progress steps
|
|
summary: Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps.
|
|
description: Use progress steps to display compact onboarding, checkout, and setup progress.
|
|
added-in: '1.5.0'
|
|
related: [/ui/components/progress, /ui/components/step]
|
|
source: core/scss/ui/_progress.scss
|
|
classnames:
|
|
component:
|
|
- class: progress-steps
|
|
desc: Container element
|
|
part:
|
|
- class: progress-steps-item
|
|
desc: One step; mark the reached ones as active
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import ProgressSteps from '@ui/ProgressSteps.astro';
|
|
|
|
## Default markup
|
|
|
|
Use `.progress-steps` as the container and `.progress-steps-item` for each segment.
|
|
|
|
```html
|
|
<ol class="progress-steps" aria-label="Onboarding progress">
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
</ol>
|
|
```
|
|
|
|
The default structure:
|
|
|
|
<Example>
|
|
<ol class="progress-steps" aria-label="Onboarding progress">
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
</ol>
|
|
</Example>
|
|
|
|
## Variants
|
|
|
|
### Current and completed step
|
|
|
|
Use color classes to mark completed steps. Set `aria-current="step"` on the current item.
|
|
|
|
<Example>
|
|
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
|
|
</Example>
|
|
|
|
### Custom labels
|
|
|
|
Use hidden labels so assistive technologies can announce meaningful step names.
|
|
|
|
<Example>
|
|
<ProgressSteps labels={['Account', 'Profile', 'Billing', 'Review']} active={3} ariaLabel="Checkout progress" />
|
|
</Example>
|
|
|
|
### Color state
|
|
|
|
Use contextual background classes on completed and current items to match the state colors of your flow.
|
|
|
|
<Example>
|
|
<div class="mb-2">
|
|
<ol class="progress-steps" aria-label="Green progress">
|
|
<li class="progress-steps-item bg-green" aria-current="step">
|
|
<span class="visually-hidden">Step 1</span>
|
|
</li>
|
|
<li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
|
|
</ol>
|
|
</div>
|
|
<div class="mb-2">
|
|
<ol class="progress-steps" aria-label="Orange progress">
|
|
<li class="progress-steps-item bg-orange" aria-current="step">
|
|
<span class="visually-hidden">Step 1</span>
|
|
</li>
|
|
<li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<ol class="progress-steps" aria-label="Red progress">
|
|
<li class="progress-steps-item bg-red" aria-current="step">
|
|
<span class="visually-hidden">Step 1</span>
|
|
</li>
|
|
<li class="progress-steps-item"><span class="visually-hidden">Step 2</span></li>
|
|
</ol>
|
|
</div>
|
|
</Example>
|
|
|
|
### Width and layout utilities
|
|
|
|
Use utility classes on `.progress-steps` to control width and placement in layouts.
|
|
|
|
<Example>
|
|
<ProgressSteps count={5} active={1} class="w-50" id="profile-progress" ariaLabel="Profile completion" />
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a `visually-hidden` span. The filled shape alone does not carry it.
|
|
- Mark the current step with `aria-current="step"`.
|
|
- If you use the underlying progress bar to draw the line, give it `role="progressbar"` with the step number as `aria-valuenow` and the total as `aria-valuemax`.
|
|
- Do not rely on the color of a circle to say "done". Add an icon or a word.
|