Selection-Expansion-Panel – digital.sbb.ch

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch

English

Selection-Expansion-Panel.

Übersicht

Aperçu.

Label Subtext CHF 40.00

Inner Content Link

Was macht die Komponente?

Das Selection-Expansion-Panel umschliesst ein Checkbox-Panel oder Radio-Button-Panel und zeigt zusätzlichen Inhalt zum Panel an.

Wann soll die Komponente eingesetzt werden?

Wenn zu einer Option zusätzlicher Inhalt angezeigt werden soll, z.B. Sub-Optionen oder Informationen.

Composant similaire.

Selection-Action-Panel

Anwendung

Regeln.

Der Inhalt öffnet sich, sobald das Panel gewählt wird. Alternativ wird er immer angezeigt.
Ein Klick auf den Inhaltsbereich ändert die Auswahl nicht.
Selection-Expansion-Panels werden nur innerhalb einer Checkbox-Group oder Radio-Button-Group eingesetzt.
Eine Option mit eigener Aktion kombiniert das Selection-Expansion-Panel mit dem Selection-Action-Panel.

Spécification.

Ouvrir dans Figma

Beispiele

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

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Storybook avec exemples interactifs

Code source sur GitHub

Documentation.

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

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

Aperçu Angular

API Angular

Exemples Angular

API

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
`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).

Navigieren auf digital.sbb.ch