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

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

Grössen

Hintergrund

White

Milk

Iron

Charcoal

Black

With Checkbox

With Radio Button

With Checkbox Size S

With Radio Button Size S

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 Size S

With Radio Button Group Size S

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

Nested Radios Size S

Nested Checkboxes Size S

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 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>

The component has no size property but, when slotted in a sbb-radio-button-group or in a sbb-checkbox-group,
it adapts to the parent size (m or s); if there's no wrapping group component,
it adapts its size to the slotted sbb-radio-button-panel or in a sbb-checkbox-panel.

<!-- Adapts to the size of the `sbb-checkbox-group`-->
<sbb-checkbox-group size="s">
  <sbb-selection-expansion-panel>
    <sbb-checkbox-panel> ... </sbb-checkbox-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-checkbox-group>

<!-- Adapts to the size of the `sbb-checkbox-panel`-->
<sbb-selection-expansion-panel>
  <sbb-checkbox-panel size="s"> ... </sbb-checkbox-panel>
  <div slot="content">Inner Content</div>
</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).