mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
112 lines
3.2 KiB
Plaintext
112 lines
3.2 KiB
Plaintext
---
|
|
title: Steps
|
|
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
|
new: true
|
|
---
|
|
|
|
## Default markup
|
|
|
|
Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
|
|
|
|
Use the `steps` class to create the default progress tracker and name the steps accordingly.
|
|
|
|
```html example
|
|
<div class="steps">
|
|
<a href="#" class="step-item">
|
|
Step 1
|
|
</a>
|
|
<a href="#" class="step-item">
|
|
Step 2
|
|
</a>
|
|
<a href="#" class="step-item active">
|
|
Step 3
|
|
</a>
|
|
<span href="#" class="step-item">
|
|
Step 4
|
|
</span>
|
|
</div>
|
|
```
|
|
|
|
## Tooltips
|
|
|
|
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
|
|
|
|
```html example
|
|
<div class="steps">
|
|
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
|
|
Step 1
|
|
</a>
|
|
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
|
|
Step 2
|
|
</a>
|
|
<a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
|
|
Step 3
|
|
</a>
|
|
<span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
|
|
Step 4
|
|
</span>
|
|
</div>
|
|
```
|
|
|
|
## Color
|
|
|
|
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/colors) to see the range of available colors.
|
|
|
|
```html example
|
|
<div class="steps steps-green">
|
|
<a href="#" class="step-item">
|
|
Step 1
|
|
</a>
|
|
<a href="#" class="step-item">
|
|
Step 2
|
|
</a>
|
|
<a href="#" class="step-item active">
|
|
Step 3
|
|
</a>
|
|
<span href="#" class="step-item">
|
|
Step 4
|
|
</span>
|
|
</div>
|
|
<div class="steps steps-red">
|
|
<a href="#" class="step-item">
|
|
Step 1
|
|
</a>
|
|
<a href="#" class="step-item">
|
|
Step 2
|
|
</a>
|
|
<a href="#" class="step-item active">
|
|
Step 3
|
|
</a>
|
|
<span href="#" class="step-item">
|
|
Step 4
|
|
</span>
|
|
</div>
|
|
```
|
|
|
|
## Steps without title
|
|
|
|
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
|
|
|
|
```html example
|
|
<div class="steps">
|
|
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
|
|
<a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
|
|
<a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
|
|
<span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
|
|
</div>
|
|
```
|
|
|
|
## Steps with numbers
|
|
|
|
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
|
|
|
|
```html example
|
|
<div class="steps steps-counter steps-lime">
|
|
<a href="#" class="step-item"></a>
|
|
<a href="#" class="step-item active"></a>
|
|
<span href="#" class="step-item"></span>
|
|
<span href="#" class="step-item"></span>
|
|
<span href="#" class="step-item"></span>
|
|
</div>
|
|
```
|