Open In App

Semantic-UI Step States

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Semantic-UI Step States

Reference: https://semantic-ui.com/elements/step.html#states



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads