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 uses a class to add CSS to the elements.
A step shows the completion of a series of activities.
Example 1: This example creating a simple step of completion.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Step</ h2 >
< div class = "ui steps" >
< div class = "step" >
Placing Order
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example creating a group of steps.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Steps</ h2 >
< div class = "ui ordered steps" >
< div class = "completed step" >
< div class = "content" >
< div class = "title" >Order</ div >
< div class = "description" >
Order the food
</ div >
</ div >
</ div >
< div class = "completed step" >
< div class = "content" >
< div class = "title" >Preparing</ div >
< div class = "description" >
Preparing the food
</ div >
</ div >
</ div >
< div class = "step" >
< div class = "content" >
< div class = "title" >On the way</ div >
< div class = "description" >
Food is on your way
</ div >
</ div >
</ div >
< div class = "disabled step" >
< div class = "content" >
< div class = "title" >Delieverd</ div >
< div class = "description" >
Food Delieverd
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
- Add ‘completed’ class to the steps which recompleted.
- Add ‘active’ class to the step which is on going.
- Add ‘disabled’ class to the step which are after the active step.
Output:
For showing these steps in vertical order replace ‘ordered’ class with ‘vertical’ class.
Example 3: This example creating the Steps with Icon.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Steps</ h2 >
< div class = "ui ordered steps" >
< div class = "completed step" >
< i class = "code icon" ></ i >
< div class = "content" >
< div class = "title" >Code</ div >
< div class = "description" >
Write Code.
</ div >
</ div >
</ div >
< div class = "completed step" >
< i class = "terminal icon" ></ i >
< div class = "content" >
< div class = "title" >Compile</ div >
< div class = "description" >
Compile Code.
</ div >
</ div >
</ div >
< div class = "step" >
< i class = "window close icon" ></ i >
< div class = "content" >
< div class = "title" >Fix Error</ div >
< div class = "description" >
If it gives error fix
</ div >
</ div >
</ div >
< div class = "disabled step" >
< i class = "terminal icon" ></ i >
< div class = "content" >
< div class = "title" >Compile Again</ div >
< div class = "description" >
Compile Code.
</ div >
</ div >
</ div >
< div class = "disabled step" >
< i class = "computer icon" ></ i >
< div class = "content" >
< div class = "title" >Output</ div >
< div class = "description" >
See the output
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Note: You can add <a> tag to make it link
Example 4: This example creating the Completed, active, disabled state in steps.
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 >Active Step</ h2 >
< div class = "ui steps" >
< div class = "active step" >
< i class = "code icon" ></ i >
< div class = "content" >
< div class = "title" >Coding</ div >
< div class = "description" >
Writing the Code
</ div >
</ div >
</ div >
</ div >
< h2 >Completed Step</ h2 >
< div class = "ui steps" >
< div class = "completed step" >
< i class = "code icon" ></ i >
< div class = "content" >
< div class = "title" >Coding</ div >
< div class = "description" >
Finsished Coding
</ div >
</ div >
</ div >
</ div >
< h2 >Disabled Step</ h2 >
< div class = "ui steps" >
< div class = "disabled step" >
< i class = "code icon" ></ i >
< div class = "content" >
< div class = "title" >Coding</ div >
< div class = "description" >
Pending
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Note:
- You can add stackable class to make group steps stackable.
- You can add ‘UI tiny steps’ class for steps to show them tiny for another size, just replace tiny with small, large, massive.
Last Updated :
20 May, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...