Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcStepComponent

The step component is used within the igc-stepper element and it holds the content of each step. It also supports custom indicators, title and subtitle.

Element

igc-step

Slot

  • Renders the content of the step.

Slot

indicator - Renders the indicator of the step. By default, it displays the step index + 1.

Slot

title - Renders the title of the step.

Slot

subtitle - Renders the subtitle of the step.

Csspart

header-container - Wrapper of the step's header and its separators.

Csspart

disabled - Indicates a disabled state. Applies to header-container.

Csspart

complete-start - Indicates a complete state of the current step. Applies to header-container.

Csspart

complete-end - Indicates a complete state of the previous step. Applies to header-container.

Csspart

optional - Indicates an optional state. Applies to header-container.

Csspart

invalid - Indicates an invalid state. Applies to header-container.

Csspart

top - Indicates that the title should be above the indicator. Applies to header-container.

Csspart

bottom - Indicates that the title should be below the indicator. Applies to header-container.

Csspart

start - Indicates that the title should be before the indicator. Applies to header-container.

Csspart

end - Indicates that the title should be after the indicator. Applies to header-container.

Csspart

header - Wrapper of the step's indicator and text.

Csspart

indicator - The indicator of the step.

Csspart

text - Wrapper of the step's title and subtitle.

Csspart

empty - Indicates that no title and subtitle has been provided to the step. Applies to text.

Csspart

title - The title of the step.

Csspart

subtitle - The subtitle of the step.

Csspart

body - Wrapper of the step's content.

Csspart

content - The steps content.

Hierarchy

Hierarchy

  • LitElement
    • IgcStepComponent

Constructors

Properties

Methods

Constructors

constructor

  • new IgcStepComponent(): IgcStepComponent

  • Returns IgcStepComponent

Properties

active

active: boolean = false

Gets/sets whether the step is activе.

complete

complete: boolean = false

Gets/sets whether the step is completed.

Remarks

When set to true the following separator is styled solid.

contentBody

contentBody: HTMLElement

disabled

disabled: boolean = false

Gets/sets whether the step is interactable.

header

header: HTMLElement

invalid

invalid: boolean = false

Gets/sets whether the step is invalid.

optional

optional: boolean = false

Gets/sets whether the step is optional.

Remarks

Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. if optional step is invalid the user could still move to the next step.

Static styles

styles: CSSResult[] = ...

Static Readonly tagName

tagName: "igc-step" = 'igc-step'

Methods

toggleAnimation

  • toggleAnimation(type, direction?): Promise<string>

  • Parameters

    • type: "in" | "out"
    • direction: "reverse" | "normal" = 'normal'

    Returns Promise<string>

Static register