Vorschau.

Was macht die Komponente?

Das Selection-Action-Panel verbindet ein Checkbox-Panel oder ein Radio-Button-Panel mit einer Aktion, z.B. einem Button. So können Nutzende eine Option auswählen und direkt eine zugehörige Aktion auslösen.

Wann soll die Komponente eingesetzt werden?

• Wenn zu einer Option eine eigene Aktion gehört, z.B. Details anzeigen oder die Option bearbeiten.
• Wenn Optionen und Aktionen in einer Liste zusammen dargestellt werden sollen.

Ähnliche Komponente.

Regeln.

• Selection-Action-Panels werden innerhalb einer Checkbox-Group oder Radio-Button-Group eingesetzt.
• Pro Panel gibt es genau eine Aktion. Sie muss sich klar von der Auswahl der Option unterscheiden.
• Die Aktion soll verständlich beschriftet sein. Bei einem Button nur mit Icon braucht es eine Beschriftung für Screenreader.
• Sollen zusätzliche Inhalte aufklappen, wird das Selection-Action-Panel mit dem Selection-Expansion-Panel kombiniert.

The <sbb-selection-action-panel> component wraps either a sbb-checkbox-panel
or a sbb-radio-button-panel and an action element (e.g. an <sbb-secondary-button> or a native button).

<sbb-selection-action-panel>
  <sbb-radio-button-panel>
    Value
    <span slot="subtext">Subtext</span>
  </sbb-radio-button-panel>

  <!-- action -->
  <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  <!-- or -->
  <button class="sbb-action">...</button>
</sbb-selection-action-panel>

With expansion panel.

It is possible to combine the usage of the <sbb-selection-action-panel> and the sbb-selection-expansion-panel.

<sbb-selection-expansion-panel>
  <sbb-selection-action-panel>
    <sbb-radio-button-panel color="milk" borderless>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>

    <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  </sbb-selection-action-panel>

  <!-- inner content -->
  <div slot="content">Inner Content</div>
</sbb-selection-expansion-panel>

In a group.

The selection panel can also be used inside a sbb-radio-button-group
or a sbb-checkbox-group.

With <sbb-radio-button-group>:

<sbb-radio-button-group>
  <sbb-selection-action-panel>
    <sbb-radio-button-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-panel>
  ...
</sbb-radio-button-group>

With <sbb-checkbox-group>:

<sbb-checkbox-group>
  <sbb-selection-action-panel>
    <sbb-checkbox-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-checkbox-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-panel>
  ...
</sbb-checkbox-group>

Style.

The component inherits its style from the slotted panel component (<sbb-checkbox-panel> or <sbb-radio-button-panel>).

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbSelectionActionPanelElement, sbb-selection-action-panel.

Properties.

Slots.