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 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 book from an app, then the app shows you the completion status of your order starting from order placed 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. Here it means whether a particular step should be in order, vertical, etc. These desired results can be achieved with the help of Step Groups in the Semantic-UI framework that is used to modify/manipulate the view of the step.
Semantic-UI Step Groups Classes:
steps: This class creates the default set of steps.
ordered: This class creates steps that show the order of the sequence of activities.
vertical: This class creates steps that can be displayed vertically.
Syntax: The syntax for all the other step groups will be the same, and the only difference will be the group name.
<div class="ui ordered steps">
Let us now have a look at a couple of examples in which we will use the above-mentioned step groups.
Example 1: In this example, the Steps Group is used.
Please Login to comment...