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

Other

styles

Other

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.

disabled

disabled: boolean = false

Gets/sets whether the step is interactable.

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.

styles

Staticstyles

styles: CSSResult[] = ...

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse