logo
v 1.0.220

Stepper

A stepper component is used to indicate progress through a multi-step process.

setup

Import the Stepper component in a script tag.

Svelte Copy
import { Stepper } from "@mgisolutions/design-system/svelte";

basic usage

Demonstrate
  • 1 Step Name this iss the title Name this iss the title
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 2 Step 2
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. ng established fact that a rea ng established fact that a rea ng established fact that a rea
  • 3 Step 3
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 4 Step 4
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Svelte Copy
const steps = [ { title: "Step 1", description: "It is a long established fact that a reader will be distracted." }, { title: "Step 2", description: "It is a long established fact that a reader will be distracted." }, { title: "Step 3", description: "It is a long established fact that a reader will be distracted." }, { title: "Step 4", description: "It is a long established fact that a reader will be distracted." }, ]; let activeStep: number = 1; <Stepper {activeStep} {steps}></Stepper>

alternate

Labels can be placed below the step icon by setting the alternativeLabel prop on the Stepper component.

Demonstrate
  • 1 Step Name this iss the title Name this iss the title
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 2 Step 2
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. ng established fact that a rea ng established fact that a rea ng established fact that a rea
  • 3 Step 3
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 4 Step 4
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Svelte Copy
<Stepper {activeStep} {steps} alternateLabel={true}></Stepper>

vertical

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented.

Demonstrate
  • 1 Step Name this iss the title Name this iss the title
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 2 Step 2
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. ng established fact that a rea ng established fact that a rea ng established fact that a rea
  • 3 Step 3
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 4 Step 4
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Svelte Copy
<Stepper {activeStep} {steps} vertical={true}></Stepper>

clickable

Selected step when click on item

Demonstrate
  • 1 Step Name this iss the title Name this iss the title
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 2 Step 2
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. ng established fact that a rea ng established fact that a rea ng established fact that a rea
  • 3 Step 3
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • 4 Step 4
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Svelte Copy
const handleSeclectStep = (e: CustomEvent) => {}; <Stepper {activeStep} {steps} clickable on:changeStep={handleSeclectStep}></Stepper>

Component Data

  • props
  • slots
Name Description Type Default
steps List title and description off StepProgress Array []
activeStep Current step of StepProgress number 1
alternateLabel Labels can be placed below the step icon boolean false
vertical Vertical steppers are designed for narrow screen sizes. boolean false
clickable Selected step when click on item boolean false
hideDescription Hide description boolean false