Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne 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 fonctionnelles 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 Base Composants Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Action-Group Implementation

The sbb-action-group component is a generic content container which can contain up to three action items
(sbb-button or sbb-block-link or other HTML elements)
in various allocations.

Style

Orientation

The orientation property is used to set item's orientation.
Possible values are horizontal (default) and vertical.

The optional property horizontalFrom can be used in combination with orientation='vertical' to
indicate the minimum breakpoint from which the orientation changes to horizontal.

<sbb-action-group orientation="vertical" horizontal-from="small">
  <sbb-secondary-button>Action 1</sbb-secondary-button>
  <sbb-button>Action 2</sbb-button>
  <sbb-block-link
    align-self="end"
    icon-name="chevron-small-left-small"
    href="https://github.com/lyne-design-system/lyne-components"
  >
    Action 3
  </sbb-block-link>
</sbb-action-group>

Button-size and link-size

The two props button-size and link-size can be used to override, respectively, the size of the inner sbb-button and sbb-block-link.
Default values are l for sbb-button and m for sbb-block-link.

<sbb-action-group button-size="m" link-size="s">
  <sbb-secondary-button>Action 1</sbb-secondary-button>
  <sbb-block-link
    icon-name="chevron-small-left-small"
    href="https://github.com/lyne-design-system/lyne-components"
  >
    Action 3
  </sbb-block-link>
</sbb-action-group>

Align-group and align-self

The align-group property can be used to set the default alignment of the contained elements;
possible values are start, center, stretch and end.

It is also possible to set the align-self attribute on action items in order to move them in the
opposite direction to the group; possible values are start, center or end.

NOTE: The sbb-action-group will only accept block-link and will sync the linkSize
property with nested sbb-block-link and the buttonSize property with the nested sbb-button
instances.

<sbb-action-group align-group="end">
  <sbb-secondary-button align-self="start">Action 1</sbb-secondary-button>
  <sbb-secondary-button>Action 2</sbb-secondary-button>
  <sbb-button>Action 3</sbb-button>
</sbb-action-group>

Allocations

Items can be displayed inside sbb-action-group in different allocations.

If we define the triad x-y-z as the number of elements aligned at the start, at the center and at the end of the component,
and we consider a template like the following one (possibly removing the link for 2-elements allocations):

<sbb-action-group>
  <sbb-button>Button 1</sbb-button>
  <sbb-button>Button 2</sbb-button>
  <sbb-block-link
    icon-name="chevron-small-left-small"
    href="https://github.com/lyne-design-system/lyne-components"
  >
    Link
  </sbb-block-link>
</sbb-action-group>

The values for align-group and align-self for the various allocations are as follows:

Horizontal

orientation='horizontal' align-group align-self
3-0-0 start /
1-1-1 start Button 2: 'center'
2-0-1 start Link: 'end'
1-0-2 end Button 1: 'start'
2-0-0 start /
1-0-1 start Button 2: 'end'

Vertical

orientation='vertical' align-group align-self
3-0-0 start /
2-0-0 start /
0-3-0 center /
0-2-0 center /
0-0-3 end /
0-0-2 end /
orientation='vertical' (full width) align-group align-self
3-0-0 stretch Link: 'start'
2-0-0 stretch /
0-3-0 stretch Link: 'center'
0-2-0 stretch /
0-0-3 stretch Link: 'end'
0-0-2 stretch /

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.
horizontalFrom horizontal-from public SbbHorizontalFrom 'medium' Overrides the behaviour of orientation property.
orientation orientation public SbbOrientation 'horizontal' Indicates the orientation of the components inside the <sbb-action-group>.
buttonSize button-size public SbbButtonSize 'l' Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.
linkSize link-size public SbbLinkSize 'm' Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances.

Slots

Name Description
Use the unnamed slot to add sbb-block-link or sbb-button elements to the sbb-action-group.
Beispiele
Horizontal Allocation 3 0 0
Horizontal Allocation 1 1 1
Horizontal Allocation 2 0 1
Horizontal Allocation 1 0 2
Horizontal Allocation 2 0 0
Horizontal Allocation 1 0 1
Vertical Allocation 3 0 0
Vertical Allocation 2 0 0
Vertical Allocation 0 3 0
Vertical Allocation 0 2 0
Vertical Allocation 0 0 3
Vertical Allocation 0 0 2
Vertical Allocation 3 0 0 Full Width
Vertical Allocation 2 0 0 Full Width
Vertical Allocation 0 3 0 Full Width
Vertical Allocation 0 2 0 Full Width
Vertical Allocation 0 0 3 Full Width
Vertical Allocation 0 0 2 Full Width
Vertical To Horizontal 3 0 0
Horizontal Allocation Size S 3 0 0
Vertical Allocation Size S 3 0 0
HTML-Markup kopiert.
Playground
Action 1Action 2Action 3
Button Grösse M L Ausrichtung Links Zentriert Rechts Verteilt / Stretched Horizontale Darstellung ab Keine horizontale Verteilung Zero Micro Small Medium Large Wide Ultra Hintergrund White Milk Iron Charcoal Black
Impressum Contact Paramètres des cookies