Step

<sl-step> | SlStep
Since 1.0 hub24

A step in a step group.

<sl-step></sl-step>

Examples

First Example 

<sl-step
  index = "1"
  label="Vertical step"
></sl-step>

Second Example 

<sl-step
  index = "1"
  label="Horizontal step"
  horizontal
></sl-step>

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
state The state of the step. 'default' | 'complete' | 'warning' | 'danger' 'default'
horizontal Whether the step is horizontal. boolean false
isFirst Whether the step is the first step. boolean false
isLast Whether the step is the last step. boolean false
active Whether the step is currently active. boolean false
disabled Whether the step is disabled. boolean false
progressed Whether the step is passed step. boolean false
isCurrent Whether the step is current step. boolean false
label The label of the step. string 'Label'
index The index of the step. Number -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
step-activate Emitted when step is selected by click and change to active step. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.