CSS only

Steps

A progress stepper / wizard. SCSS-only: a ng-steps track of ng-step items with is-done and is-active states.

Each ng-step holds a ng-step-dot (number or icon) and a ng-step-label. Mark completed steps is-done and the current one is-active.

Classic

Cart

2 Shipping

3 Payment

steps.html

<div class="ng-steps classic">
    <div class="ng-step is-done">
        <span class="ng-step-dot"><i class="ph ph-check"></i></span>
        <span class="ng-step-label">Cart</span>
    </div>
    <div class="ng-step is-active">
        <span class="ng-step-dot">2</span>
        <span class="ng-step-label">Shipping</span>
    </div>
    <div class="ng-step">
        <span class="ng-step-dot">3</span>
        <span class="ng-step-label">Payment</span>
    </div>
</div>

Bar

Add bar for a connected progress-bar style.

Cart

2 Shipping

3 Payment

steps.html

<div class="ng-steps bar">
    <div class="steps-track">
        <div class="steps-progress" style="width: 50%"></div>
    </div>
    <div class="steps-items">
        <div class="ng-step is-done">
            <span class="ng-step-dot"><i class="ph ph-check"></i></span>
            <span class="ng-step-label">Cart</span>
        </div>
        <div class="ng-step is-active">
            <span class="ng-step-dot">2</span>
            <span class="ng-step-label">Shipping</span>
        </div>
        <div class="ng-step">
            <span class="ng-step-dot">3</span>
            <span class="ng-step-label">Payment</span>
        </div>
    </div>
</div>

Anatomy

ng-steps ng-step ng-step-dot ng-step-label

Styles & states

classic bar sm lg is-active is-done

Reference

Generated from the component source (_ng_steps.scss).

Component info

Name	`Steps`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_steps.scss`

Classes

.ng-step .ng-step-dot .ng-step-label .ng-steps

Tokens

--ng-steps-circle-bg --ng-steps-circle-color --ng-steps-circle-font --ng-steps-circle-size --ng-steps-font-size --ng-steps-gap --ng-steps-line-color --ng-steps-line-height --ng-steps-line-width --ng-steps-progress-color --ng-steps-text-color --ng-steps-track-color --ng-steps-track-height