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 Dialog-Actions Info

Was macht die Komponente?

Sie ist Teil der Dialog-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Dialog-Komponente.
Dialog
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-dialog-title Nein
2 Komponente sbb-dialog-close-button Ja Close-Action
2 Slot Beliebiger Inhalt erlaubt Nein
4 Komponente sbb-dialog-actions Ja
4a Komponente sbb-secondary-button Ja Auch Block-Links sind erlaubt
4b Komponente sbb-button Ja Auch Block-Links sind erlaubt
Demo Default
HTML in Zwischenablage kopiert.
Implementation

The sbb-dialog-actions component extends the sbb-action-group component. Use it in combination with the sbb-dialog to display a footer with an action group.

<sbb-dialog>
  <sbb-dialog-actions>
    <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
    <sbb-secondary-button sbb-dialog-close>Cancel</sbb-secondary-button>
    <sbb-button sbb-dialog-close sbb-focus-initial>Confirm</sbb-button>
  </sbb-dialog-actions>
</sbb-dialog>

Properties

Name Attribute Privacy Type Default Description
alignGroup align-group public 'start' | 'center' | 'stretch' | 'end' 'start' Set the slotted <sbb-action-group> children's alignment.
buttonSize button-size public SbbButtonSize 'm' / 's' (lean) Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.
horizontalFrom horizontal-from public SbbHorizontalFrom 'large' Overrides the behaviour of orientation property.
linkSize link-size public SbbLinkSize 's' / 'xs' (lean) Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances.
orientation orientation public SbbOrientation 'horizontal' Indicates the orientation of the components inside the <sbb-action-group>.

Slots

Name Description
Use the unnamed slot to add sbb-block-link or sbb-button elements to the sbb-dialog-actions.