Skip to content
Related Articles

Related Articles

Semantic-UI Step Groups

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Step Groups</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 Groups</div>
 
    <div class="ui steps">
        <!--Steps Group-->
        <!--Completed State -->
        <div class="completed step">           
            <i class="payment icon"></i>
            <div class="content">
                <div class="title">Order Placed</div>
                <div class="information">Accepted</div>
            </div>
        </div>
 
        <!--Completed State -->
        <div class="completed step">           
            <i class="payment icon"></i>
            <div class="content">
                <div class="title">Order Packaged</div>
                <div class="information">Order 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>
    </div>
</body>
 
</html>


Output:

Semantic-UI Step Groups

Semantic-UI Step Groups

Example 2: In this example, the Ordered Group is used.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Step Groups</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 Groups</div>
 
    <div class="ui ordered steps">
        <!--Steps Group-->
        <!--Completed State -->
        <div class="completed step">
            <div class="content">
                <div class="title">Game Time</div>
                <div class="information">Game Started</div>
            </div>
        </div>
 
        <!--Active State -->
        <div class="active step">           
            <i class="futbol icon"></i>
            <div class="content">
                <div class="title">Game Score</div>
                <div class="information">0-0</div>
            </div>
        </div>
 
        <!--Disabled State -->
        <div class="disabled step">           
            <i class="futbol icon"></i>
            <div class="content">
                <div class="title">Game Over</div>
                <div class="information">Result</div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Step Groups

Semantic-UI Step Groups

Example 3: In this example, the Vertical Group is used.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Step Groups</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 Groups</div>
 
    <div class="ui vertical steps">
        <!--Steps Group-->
        <!--Completed State -->
        <div class="completed step">
            <i class="payment icon"></i>
            <div class="content">
                <div class="title">Order Placed</div>
                <div class="information">Order Accepted</div>
            </div>
        </div>
 
        <!--Active State -->
        <div class="active step">
            <i class="food icon"></i>
            <div class="content">
                <div class="title">Food Prepared</div>
                <div class="information">Food Prepared</div>
            </div>
        </div>
 
        <!--Disabled State -->
        <div class="disabled 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>
</body>
 
</html>


Output:

Semantic-UI Step Groups

Semantic-UI Step Groups

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!