Semantic-UI Step States
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"> <!--To make steps vertical--> <!--Completed State --> <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> <!--Completed State --> <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> <!--Completed State --> <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> <!--Active State --> <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> <!--Disabled State --> <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"> <!--To make steps vertical--> <!--Completed State --> <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> <!--Completed State --> <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> <!--Active State --> <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> <!--Disabled State --> <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
Please Login to comment...