Open In App

Semantic-UI Step Disabled State

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.

Semantic UI Step States offers us different states like active, completed, and disabled. In this article, we will know about the Semantic UI Step disabled states. This status is used to create steps that will be disabled.

Semantic UI Step Disabled Step is used to make any particular step disabled, we cannot make all the steps disabled by using this class.

Semantic UI Step Disabled Step Class:

  • disabled: This class is used to make the step disabled.

Syntax:

<div class="step disabled">
  ...
</div>

Example 1: The below example illustrates the Semantic UI Step Disabled state. In this example, we will make only one specific step disabled.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Semantic-UI Step Disabled State</title>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">Geeksforgeeks</h1>
         <strong> Semantic-UI Step Disabled State   </strong>
         <br><br>
      </center>
      <strong>Disabled Steps:</strong>
      <div class="ui steps">
        <div class="step">
           <i class="truck icon green"></i>
           <div class="content">
              <div class="title">Shipping</div>
              <div class="description">
                 Select your Address
              </div>
           </div>
        </div>
        <div class="step">
           <i class="file alternate blue icon"></i>
           <div class="content">
              <div class="title">Billing</div>
              <div class="description">
                 Select your way to pay
              </div>
           </div>
        </div>
        <div class="step">
           <i class="file alternate icon"></i>
           <div class="content">
              <div class="title">Delivered</div>
              <div class="description">
                 Check you package
              </div>
           </div>
        </div>
        <div class="step disabled">
           <i class="recycle icon"></i>
           <div class="content">
              <div class="title">Return</div>
              <div class="description">
                 Refund initiated
              </div>
           </div>
        </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Step Disabled Step

Semantic-UI Step Disabled Step

Example 2: We will disable the first three steps.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Semantic-UI Step Disabled State</title>
      <link href=
            rel="stylesheet" />
   </head>
   <body>
      <center>
         <h1 class="ui header green">Geeksforgeeks</h1>
         <strong> Semantic-UI Step Disabled State   </strong>
         <br><br>
      </center>
      <strong>Disabled Steps:</strong>
      <div class="ui steps">
        <div class="disabled step">
           <i class="truck icon green"></i>
           <div class="content">
              <div class="title">Shipping</div>
              <div class="description">
                 Select your Address
              </div>
           </div>
        </div>
        <div class="disabled step">
           <i class="file alternate blue icon"></i>
           <div class="content">
              <div class="title">Billing</div>
              <div class="description">
                 Select your way to pay
              </div>
           </div>
        </div>
        <div class="disabled step">
           <i class="file alternate icon"></i>
           <div class="content">
              <div class="title">Delivered</div>
              <div class="description">
                 Check you package
              </div>
           </div>
        </div>
        <div class="step">
           <i class="recycle icon"></i>
           <div class="content">
              <div class="title">Return</div>
              <div class="description">
                 Refund initiated
              </div>
           </div>
        </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Step Disabled State

Semantic-UI Step Disabled State

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



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