Aperçu.

Was macht die Komponente?

Eine Action-Group ordnet Buttons und Links zusammen an. So werden verwandte Aktionen gebündelt und einheitlich dargestellt.

Wann soll die Komponente eingesetzt werden?

• Um mehrere zusammengehörige Aktionen kompakt und übersichtlich darzustellen.
• Um verwandte Aktionen für die Benutzerführung zu gruppieren.

Composant similaire.

Regeln.

• Die Reihenfolge ist logisch: Aktionen, die den Prozess fortführen, stehen rechts. Aktionen wie «Zurück» oder «Abbrechen» stehen links.
• Es gibt nur einen Primary-Button.
• Erlaubt sind Buttons und Block-Links in allen Varianten.
• Auf kleinen Bildschirmen können die Elemente untereinander und in voller Breite angeordnet werden.

Spécification.

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Documentation.

The <sbb-action-group> component is a generic content container for action items such as
sbb-button, sbb-block-link or other HTML elements.

Style.

The sbb-action-group behaves like a standard flex element. It can be customized
via CSS rules directly on the <sbb-action-group> element or on the slotted action elements.

A set of CSS classes is available for common layout configurations such as vertical orientation
items and responsive breakpoint variants
(the complete list is available in the layout documentation).

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

Adding the sbb-orientation-vertical-full-width class switches the group to a vertical column layout
where each action item stretches to the full width of the container.

<sbb-action-group class="sbb-orientation-vertical-full-width">
  <sbb-secondary-button>Action 1</sbb-secondary-button>
  <sbb-button>Action 2</sbb-button>
</sbb-action-group>

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

class: SbbActionGroupElement, sbb-action-group.

Slots.