Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: 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.
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies