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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Semantic-UI Step States</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
</ head >
< body >
< br >
< div class = "ui green huge header" >GeeksforGeeks</ div >
< div class = "ui large header" >
Semantic-UI Step States
</ div >
< div class = "ui vertical steps" >
< div class = "completed step" >
< i class = "payment icon" ></ i >
< div class = "content" >
< div class = "title" >Accepted</ div >
< div class = "information" >
Payment Accepted
</ div >
</ div >
</ div >
< div class = "completed step" >
< i class = "payment icon" ></ i >
< div class = "content" >
< div class = "title" >In Kitchen</ div >
< div class = "information" >
Order Cooked
</ div >
</ div >
</ div >
< div class = "completed step" >
< i class = "payment icon" ></ i >
< div class = "content" >
< div class = "title" >Order Prepared</ div >
< div class = "information" >
Food is ready
</ div >
</ div >
</ div >
< div class = "active step" >
< i class = "motorcycle icon" ></ i >
< div class = "content" >
< div class = "title" >Out For Delivery</ div >
< div class = "information" >
Delivery incoming
</ div >
</ div >
</ div >
< div class = "disabled step" >
< i class = "thumbs up icon" ></ i >
< div class = "content" >
< div class = "title" >Delivered</ div >
< div class = "information" >
Order Successfully Delivered
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Step States
Example 2: Step showing the status of an item delivery
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Semantic-UI Step States</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
</ head >
< body >
< br >
< div class = "ui green huge header" >GeeksforGeeks</ div >
< div class = "ui large header" >Semantic-UI Step States</ div >
< div class = "ui vertical steps" >
< div class = "completed step" >
< i class = "payment icon" ></ i >
< div class = "content" >
< div class = "title" >Ordered</ div >
< div class = "information" >
Order Placed
</ div >
</ div >
</ div >
< div class = "completed step" >
< i class = "payment icon" ></ i >
< div class = "content" >
< div class = "title" >Shipped</ div >
< div class = "information" >
Package Shipped
</ div >
</ div >
</ div >
< div class = "active step" >
< i class = "truck icon" ></ i >
< div class = "content" >
< div class = "title" >Out For Delivery</ div >
< div class = "information" >
Delivery incoming
</ div >
</ div >
</ div >
< div class = "disabled step" >
< i class = "thumbs up icon" ></ i >
< div class = "content" >
< div class = "title" >Arriving Tomorrow</ div >
< div class = "information" >
Arriving Status
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Step States
Reference: https://semantic-ui.com/elements/step.html#states
Last Updated :
22 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...