Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Expansion-Panel Implementation

The sbb-expansion-panel is a component which acts as an expandable summary-details widget.

It can be used standalone or inside a sbb-accordion.

Slots

In order to correctly display the component, it must be used together with
a sbb-expansion-panel-header
and a sbb-expansion-panel-content;
the first will work as a state controller, the last will act as the expandable content.

These two components automatically fill the two available slots, named header and content.

<sbb-expansion-panel>
  <sbb-expansion-panel-header>This is the header.</sbb-expansion-panel-header>
  <sbb-expansion-panel-content>This is the content.</sbb-expansion-panel-content>
</sbb-expansion-panel>

States

The visibility of the content is controlled by the value of the expanded property.

<sbb-expansion-panel expanded> ... </sbb-expansion-panel>

The disabled state can be set using the self-named variable. In this state, the component can not be collapsed or expanded.

<sbb-expansion-panel disabled> ... </sbb-expansion-panel>

Style

The component has two background options (milk and white, which is the default) that can be set using the color variable.

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

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

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

Using the titleLevel variable, it's possible to wrap the sbb-expansion-panel-header in a heading tag;
if it's unset, a <div> is used as a wrapper.

<sbb-expansion-panel level="4">
  <sbb-expansion-panel-header
    >This is the header, and it will be wrapped in a h4 tag.</sbb-expansion-panel-header
  >
  <sbb-expansion-panel-content>This is the content.</sbb-expansion-panel-content>
</sbb-expansion-panel>

Accessibility

When the sbb-expansion-panel-header and the sbb-expansion-panel-content are slotted into the component,
they both receive an id, if not set; then, the content's id is set as aria-controls attribute of the header,
and the header's id is set as aria-labelledby attribute on the content.

The expanded attribute is used to correctly set the aria-expanded attribute on the header
and the aria-hidden attribute on the content.

Properties

Name Attribute Privacy Type Default Description
titleLevel title-level public SbbTitleLevel | null | undefined Heading level; if unset, a div will be rendered.
color color public 'white' | 'milk' 'white' The background color of the panel.
expanded expanded public boolean false Whether the panel is expanded.
disabled disabled public boolean false Whether the panel is disabled, so its expanded state can't be changed.
borderless borderless public boolean false Whether the panel has no border.
disableAnimation disable-animation public boolean false Whether the animations should be disabled.

Events

Name Type Description Inherited From
willOpen CustomEvent<void> Emits whenever the sbb-expansion-panel starts the opening transition.
didOpen CustomEvent<void> Emits whenever the sbb-expansion-panel is opened.
willClose CustomEvent<void> Emits whenever the sbb-expansion-panel begins the closing transition.
didClose CustomEvent<void> Emits whenever the sbb-expansion-panel is closed.

Slots

Name Description
Use the unnamed slot to add a sbb-expansion-panel-header and a sbb-expansion-panel-content element.
Beispiele
Default
Milk
Borderless
Disabled
With Icon
With Slotted Icon
No Heading Tag
Expanded
Expanded Icon
Long Text
No Animation
HTML-Markup kopiert.
Playground
Header 1Content 1Header 2Content 2
Ohne Rahmen Nein Ja Farbe White Milk Disabled Nein Ja Hintergrund White Milk Iron Charcoal Black
Impressum Contact Paramètres des cookies