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.
| 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 |
Spielwiese
Inner Content Link
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).
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). |