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.

Anatomie

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

Demo

Spielwiese

LabelSubtext

CHF 40.00

Inner ContentLink

Farbe

White

Milk

Inhalt immer anzeigen

Nein

Hintergrund

White

Milk

Iron

Charcoal

Black

Beispiele

With Checkbox

With Radio Button

With Checkbox Checked

With Radio Button Checked

With Checkbox Disabled

With Radio Button Disabled

With Checkbox Checked Disabled

With Radio Button Checked Disabled

With Checkbox Group

With Radio Button Group

With Checkbox Group Force Open

With Radio Button Group Force Open

With Radio Button Group Allow Empty

With Checkbox Group Milk

With Radio Button Group Milk

With Checkbox Borderless

With Radio Button Borderless

With Checkbox Group Milk Borderless

With Radio Button Group Milk Borderless

With Checkboxes Error Message

With Radios Error Message

Tickets Options Example

Nested Radios

Nested Checkboxes

HTML-Markup 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 has two background options that can be set using the color variable: milk and white (default).

<sbb-selection-expansion-panel color="milk"> ... </sbb-selection-expansion-panel>

It's also possible to display the sbb-selection-expansion-panel without border by setting the borderless variable to true.

<sbb-selection-expansion-panel borderless> ... </sbb-selection-expansion-panel>

Properties

Name	Attribute	Privacy	Type	Default	Description
`borderless`	`borderless`	public	`boolean`	`false`	Whether the unselected panel has a border.
`color`	`color`	public	`'white' \| 'milk'`	`'white'`	The background color of the panel.
`forceOpen`	`force-open`	public	`boolean`	`false`	Whether the content section is always visible.

Events

Name	Type	Description
`didClose`	`CustomEvent<void>`	Emits whenever the content section is closed.
`didOpen`	`CustomEvent<void>`	Emits whenever the content section is opened.
`willClose`	`CustomEvent<void>`	Emits whenever the content section begins the closing transition.
`willOpen`	`CustomEvent<void>`	Emits whenever the content section starts the opening transition.

Slots

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