Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

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

Other

lifecycle

Other

animationDuration

animationDuration: number = 320

The animation duration in either vertical or horizontal mode.

Attr

animation-duration

contentTop

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

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

The animation type when in horizontal mode.

Attr

horizontal-animation

linear

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

orientation: "horizontal" | "vertical" = 'horizontal'

Gets/Sets the orientation of the stepper.

Remarks

Default value is horizontal.

stepType

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

Get/Set the type of the steps.

Remarks

Default value is full.

steps

steps: IgcStepComponent[]

Returns all of the stepper's steps.

OptionaltitlePosition

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

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

The animation type when in vertical mode.

Attr

vertical-animation

Static ReadonlytagName

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

Returns the HTML-uppercased qualified name.

MDN Reference

navigateTo

next

prev

reset

  • reset(): 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

lifecycle

connectedCallback

  • connectedCallback(): void

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
      super.connectedCallback();
      addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void