We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
The stepper component can be used to show a numbered list of steps next to a form component to indicate the progress and number of steps that are required to complete and submit the form data.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Stepper component
within the ui()
plugin.
To create a stepper, just add the .uk-stepper
class to a <ul>
tag.
This example can be used to highlight the current step in the stepper, indicating which step is actively being worked on.
Note When you add the .uk-active
class to one of your li
tags, the previous li
tags will automatically change colors.
To show a checkmark when the step has been finished, add the .uk-stepper-checked
to one of your li
tag.
This example can be used to display step numbers within the stepper, helping to indicate the sequence of steps. Each li tag will be numbered to show its position in the progression.
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-stepper | .uk-stepper |
hook-misc | * |