Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori addizionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Releases Design Tokens Componenti Introduzione Base Informations Introduzione Base Componenti Introduzione Power-Apps Banner pubblicitari digitali SAP IA Design : Base. Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English Step Info

Was macht die Komponente?

Sie ist Teil der Stepper-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Stepper-Komponente.
Stepper
Demo Default
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Use the sbb-step with the sbb-stepper to display a step content.

<sbb-step>Step content</sbb-step>

Slots

It has an implicit slot named step.

Events

Whenever a step switch is triggered, a validate event is emitted and can be canceled to prevent the step change.

Accessibility

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.

Properties

Name Attribute Privacy Type Default Description
label - public SbbStepLabelElement | null null The label of the step.
stepper - public SbbStepperElement | null

Events

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.

Slots

Name Description
Use the unnamed slot to provide content.
Contatto

Avete domande? Forse le nostre FAQ o la nostra guida vi saranno d'aiuto, altrimenti potete inserire la vostra domanda nella board corrispondente su Github.

Impressum Contatto Protezione dei dati Impostazioni dei cookie