Sie ist Teil der Stepper-Komponente.
Use the sbb-step with the sbb-stepper to display a step content.
<sbb-step>Step content</sbb-step>
It has an implicit slot named step.
Whenever a step switch is triggered, a validate event is emitted and can be canceled to prevent the step change.
Whenever textual content is provided, please also set the attribute tabindex=‘0’ on the text tag, so that it can be reached and announced by screen-readers. Also remember to use the classes .sbb-focus-outline and .sbb-focus-outline-dark to correctly style the outline.
<sbb-step>
<p tabindex="0" class="sbb-focus-outline">Step content</p>
<sbb-button>Button<sbb-button>
</sbb-step>
The aria attribute aria-labelledby is set automatically.
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
label | - | public | SbbStepLabelElement | null | null | The label of the step. |
stepper | - | public | SbbStepperElement | null |
| Name | Type | Description | Inherited From |
|---|---|---|---|
validate | CustomEvent<SbbStepValidateEventDetails> | The validate event is dispatched when a step change is triggered. Can be canceled to abort the step change. |
| Name | Description |
|---|---|
| Use the unnamed slot to provide content. |