Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It consists of pre-built semantic components with the help of which one can create beautiful and responsive layouts.
A step shows the completion status of an activity in a series of activities. It is an essential component as it helps the user to keep a track of his/her activities. For example: If you order a food dish from a restaurant’s app, then the app shows you the completion status of your order starting from in kitchen to successfully delivered. This same can be achieved with the help of Steps in Semantic-UI.
There are times when we have to create a step in a certain manner such as a step with a particular state. Here the state of a step means whether the particular step is active, completed, etc. These desired results can be achieved with the help of Step States in the Semantic-UI framework that is used to modify the states of the step.
Semantic-UI Step States:
active: Using this class, the step is highlighted which indicates that it is active.
completed: Using this class, there is a green-coloured tick in the step that indicates that the step has been completed.
disabled: Using this class, the step is disabled which indicates that it cannot be selected.
Syntax: The syntax for all the other step states will be the same, and the only difference will be the state name.
<div class="completed step">
Let us now have a look at a couple of examples in which we will use the above-mentioned step states.
Example 1: Step showing the status of food delivery.
Please Login to comment...