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 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 | 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 or sbb-radio-button elements to the sbb-selection-expansion-panel. | |
content | Use this slot to provide custom content for the panel (optional). |