Semantic-UI | Step
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.
Please Login to comment...