A stepper component that provides a wizard-like workflow by dividing content into logical steps.
Element
igc-stepper
Slots
default — Renders the steps of the stepper inside the default slot.

Remarks

[object Object]

Example

<igc-stepper>
  <igc-step>
    <span slot="title">Step 1</span>
    <p>Step 1 content</p>
  </igc-step>
  <igc-step>
    <span slot="title">Step 2</span>
    <p>Step 2 content</p>
  </igc-step>
</igc-stepper>

Properties

Section titled "Properties"

animationDuration

Section titled "animationDuration"

The animation duration in either vertical or horizontal mode in milliseconds.

 
animationDuration: number = 320

Defined in src/components/stepper/stepper.ts:195

contentTop

Section titled "contentTop"

Whether the content is displayed above the steps.

 
contentTop: boolean = false

Defined in src/components/stepper/stepper.ts:168

horizontalAnimation

Section titled "horizontalAnimation"

The animation type when in horizontal mode.

 
horizontalAnimation: HorizontalTransitionAnimation = 'slide'

Defined in src/components/stepper/stepper.ts:186

linear

Section titled "linear"

Whether the stepper is linear.

 
linear: boolean = false

Defined in src/components/stepper/stepper.ts:159

Remarks

If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.

orientation

Section titled "orientation"

The orientation of the stepper.

 
orientation: StepperOrientation = 'horizontal'

Defined in src/components/stepper/stepper.ts:138

stepType

Section titled "stepType"

The visual type of the steps.

 
stepType: StepperStepType = 'full'

Defined in src/components/stepper/stepper.ts:147

titlePosition

Section titled "titlePosition"

The position of the steps title.

 
titlePosition: StepperTitlePosition = 'auto'

Defined in src/components/stepper/stepper.ts:208

Remarks

When the stepper is horizontally orientated the title is positioned below the indicator. When the stepper is vertically orientated the title is positioned on the right side of the indicator.

verticalAnimation

Section titled "verticalAnimation"

The animation type when in vertical mode.

 
verticalAnimation: StepperVerticalAnimation = 'grow'

Defined in src/components/stepper/stepper.ts:177

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-stepper" = 'igc-stepper'

Defined in src/components/stepper/stepper.ts:101

Accessors

Section titled "Accessors"

steps

Section titled "steps"

Returns all of the stepper's steps.

 
get steps(): readonly IgcStepComponent[]

Defined in src/components/stepper/stepper.ts:127

Returns readonly IgcStepComponent[]

Methods

Section titled "Methods"
Section titled "navigateTo"

Activates the step at a given index.

 
navigateTo(index: number): void

Defined in src/components/stepper/stepper.ts:383

Parameters

  • index: number

Returns void

next

Section titled "next"

Activates the next enabled step.

 
next(): void

Defined in src/components/stepper/stepper.ts:392

Returns void

prev

Section titled "prev"

Activates the previous enabled step.

 
prev(): void

Defined in src/components/stepper/stepper.ts:397

Returns void

reset

Section titled "reset"

Resets the stepper to its initial state, i.e. activates the first step.

 
reset(): void

Defined in src/components/stepper/stepper.ts:407

Returns void