Selection-Expansion-Panel. Info

Was macht die Komponente?

Sie wird um ein Checkbox-Panel oder einem Radio-Button-Panel gewrappt und bietet die Möglichkeit an für die Panels zusätzlichen Inhalt anzuzeigen.

Wann soll die Komponente eingesetzt werden?

  • Wenn bei einem Checkbox-Panel oder einem Radio-Button-Panel zusätzlich Inhalt (z.B. für Sub-Optionen, Informationen) angezeigt werden soll.

Regeln.

  • Die zusätzlichen Inhalte (pro Panel) können immer angezeit werden oder nur beim gewählten Zustand.
  • Selection-Expansion-Panel sollen nur innerhalb Checkbox-Groups und Radio-Button-Groups eingesetzt werden.
Checkbox-Panel Radio-Button-Panel
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1a Komponente sbb-checkbox-panel Nein
1b Komponente sbb-radio-button-panel Nein
2 Slot Für zusätzlichen Inhalt Nein
Demo

Spielwiese.

Label Subtext CHF 40.00 %
Inner Content Link
Farbe White Milk Inhalt immer anzeigen Nein Ja Grössen S M Mode (System-Einstellung) Light Dark Hintergrund White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
With Checkbox.
Auf Storybook ausprobieren HTML einblenden
With Radio Button.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Size S.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Size S.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Checked.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Checked.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Disabled.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Disabled.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Checked Disabled.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Checked Disabled.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Group.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Group Size S.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group Size S.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Group Force Open.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group Force Open.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group Allow Empty.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Group Milk.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group Milk.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Borderless.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Borderless.
Auf Storybook ausprobieren HTML einblenden
With Checkbox Group Milk Borderless.
Auf Storybook ausprobieren HTML einblenden
With Radio Button Group Milk Borderless.
Auf Storybook ausprobieren HTML einblenden
With Checkboxes Error Message.
Auf Storybook ausprobieren HTML einblenden
With Radios Error Message.
Auf Storybook ausprobieren HTML einblenden
Tickets Options Example.
Auf Storybook ausprobieren HTML einblenden
Nested Radios.
Auf Storybook ausprobieren HTML einblenden
Nested Checkboxes.
Auf Storybook ausprobieren HTML einblenden
Nested Radios Size S.
Auf Storybook ausprobieren HTML einblenden
Nested Checkboxes Size S.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

The <sbb-selection-expansion-panel> component wraps either a sbb-checkbox-panel
or a sbb-radio-button-panel that can toggle a content section.

The content section can be opened by checking <sbb-checkbox-panel> or selecting the <sbb-radio-button-panel>.
Additionally, clicking on all the upper area sets the checked state and therefore opens the content;
clicking on the content area does not toggle anything.

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-expansion-panel>
    <sbb-radio-button-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <span slot="suffix">
        <sbb-icon></sbb-icon>
        <span class="sbb-text-xs sbb-text--bold">CHF</span>
        <span class="sbb-text-m sbb-text--bold">40.00</span>
      </span>
    </sbb-radio-button-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-radio-button-group>

With <sbb-checkbox-group>.

<sbb-checkbox-group>
  <sbb-selection-expansion-panel>
    <sbb-checkbox-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <span slot="suffix">
        <sbb-icon name="cross-small"></sbb-icon>
        <span class="sbb-text-xs sbb-text--bold">CHF</span>
        <span class="sbb-text-m sbb-text--bold">40.00</span>
      </span>
    </sbb-checkbox-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-checkbox-group>

Style.

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

API Documentation.

class: SbbSelectionExpansionPanelElement, sbb-selection-expansion-panel.

Properties.

Name Attribute Privacy Type Default Description
forceOpen force-open public boolean false Whether the content section is always visible.
group - public SbbRadioButtonGroupElement | SbbCheckboxGroupElement | null Group element if present
panel - public SbbCheckboxPanelElement | SbbRadioButtonPanelElement | null Input panel element

Events.

Name Type Description Inherited From
beforeclose Event Emits whenever the content section begins the closing transition.
beforeopen Event Emits whenever the content section starts the opening transition.
close Event Emits whenever the content section is closed.
open Event Emits whenever the content section is opened.

Slots.

Name Description
Use the unnamed slot to add sbb-checkbox-panel or sbb-radio-button-panel elements to the sbb-selection-expansion-panel.
content Use this slot to provide custom content for the panel (optional).