Semantic-UI Step Vertical Group

The Semantic-UI Step Vertical Group is a component designed to display a stack of steps in a vertical format. It is useful when designing multi-step forms, wizards or a step-by-step interface in a web application.

Getting Started

To use the Semantic-UI Step Vertical Group, you need to have a basic understanding of Semantic-UI and have it installed in your project. You can install it via npm or by downloading the source files from the Semantic-UI website.

Usage

To use the Step Vertical Group, you need to add the following code to your HTML:

<div class="ui vertical steps">
  <div class="step">
    <div class="content">
      <div class="title">Step 1</div>
      <div class="description">Step 1 description</div>
    </div>
  </div>
  <div class="step">
    <div class="content">
      <div class="title">Step 2</div>
      <div class="description">Step 2 description</div>
    </div>
  </div>
</div>

In this example, we have two steps inside a div element with a class of ui vertical steps. Each step contains a div element with classes content, title and description. The content class is mandatory, while the other classes are optional.

For each step, you can add an icon by adding a i element before the div element with the content class:

<div class="ui vertical steps">
  <div class="step">
    <i class="user icon"></i>
    <div class="content">
      <div class="title">Step 1</div>
      <div class="description">Step 1 description</div>
    </div>
  </div>
  <div class="step">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Step 2</div>
      <div class="description">Step 2 description</div>
    </div>
  </div>
</div>

Styling

The Semantic-UI Step Vertical Group is highly customizable. You can change the color, size, and spacing of the steps.

To change the color of the steps, you can use the following classes:

• completed for completed steps.
• active for the currently active step.
• disabled for steps that have not been completed yet.

<div class="ui vertical steps">
  <div class="step completed">
    <i class="user icon"></i>
    <div class="content">
      <div class="title">Step 1</div>
      <div class="description">Step 1 description</div>
    </div>
  </div>
  <div class="step active">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Step 2</div>
      <div class="description">Step 2 description</div>
    </div>
  </div>
  <div class="step disabled">
    <i class="checkmark icon"></i>
    <div class="content">
      <div class="title">Step 3</div>
      <div class="description">Step 3 description</div>
    </div>
  </div>
</div>

To change the size of the steps, you can use the small or tiny classes:

<div class="ui vertical steps small">
  <div class="step active">
    <i class="user icon"></i>
    <div class="content">
      <div class="title">Step 1</div>
      <div class="description">Step 1 description</div>
    </div>
  </div>
  <div class="step">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Step 2</div>
      <div class="description">Step 2 description</div>
    </div>
  </div>
</div>

To change the spacing of the steps, you can use the ordered class:

<div class="ui ordered vertical steps">
  <div class="step active">
    <i class="user icon"></i>
    <div class="content">
      <div class="title">Step 1</div>
      <div class="description">Step 1 description</div>
    </div>
  </div>
  <div class="step completed">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Step 2</div>
      <div class="description">Step 2 description</div>
    </div>
  </div>
</div>

Conclusion

The Semantic-UI Step Vertical Group component is a useful tool for creating multi-step forms and wizards in web applications. Its flexibility and customizability make it a great choice for any project. With a basic understanding of Semantic-UI, you can easily integrate this component into your web application.