Class IgcStepperComponent

IgxStepper provides a wizard-like workflow by dividing content into logical steps.

Remarks

The stepper component allows the user to navigate between multiple steps. It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step.

Element

igc-stepper

Slot

  • Renders the step components inside default slot.

Fires

igcActiveStepChanging - Emitted when the active step is about to change.

Fires

igcActiveStepChanged - Emitted when the active step is changed.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcStepperEventMap, this> & LitElement<this>
    • IgcStepperComponent

Constructors

Properties

animationDuration: number = 320

The animation duration in either vertical or horizontal mode.

Attr

animation-duration

contentTop: boolean = false

Get/Set whether the content is displayed above the steps.

Remarks

Default value is false and the content is below the steps.

horizontalAnimation: "none" | "fade" | "slide" = 'slide'

The animation type when in horizontal mode.

Attr

horizontal-animation

linear: boolean = false

Get/Set whether the stepper is linear.

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: "horizontal" | "vertical" = 'horizontal'

Gets/Sets the orientation of the stepper.

Remarks

Default value is horizontal.

stepType: "title" | "full" | "indicator" = 'full'

Get/Set the type of the steps.

Remarks

Default value is full.

Returns all of the stepper's steps.

titlePosition?: "end" | "start" | "top" | "bottom"

Get/Set the position of the steps title.

Remarks

The default value is undefined. When the stepper is horizontally orientated the title is positioned below the indicator. When the stepper is horizontally orientated the title is positioned on the right side of the indicator.

verticalAnimation: "none" | "grow" | "fade" = 'grow'

The animation type when in vertical mode.

Attr

vertical-animation

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

Methods

  • Returns void

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

    Remarks

    The steps' content will not be automatically reset.

    Returns void