Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Zusätzliche Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen App Icons Expansion-Panel-Content Info

Was macht die Komponente?

Sie ist Teil der Accordion-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Accordion-Komponente.
Expansion-Panel
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-extension-panel Nein
2 Komponente sbb-expansion-panel-header Nein
2a Komponente sbb-icon Ja
2b Text Label Nein
2c Komponente sbb-icon Nein Zeigt den Zustand an
3 Komponente sbb-expansion-panel-content Nein
3a Slot Beliebiger Inhalt erlaubt Nein
Implementation

The sbb-expansion-panel-content is a component which acts as a container for any element
that needs to be displayed in a sbb-expansion-panel.

<sbb-expansion-panel-content>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>
    <span> Donec porttitor blandit odio, ut blandit libero cursus vel. </span>
    <span>
      Nunc eu congue mauris. Quisque sed facilisis leo. Curabitur malesuada, nibh ac blandit
      vehicula, urna sem scelerisque magna, sed tincidunt neque arcu ac justo.
    </span>
  </p>
</sbb-expansion-panel-content>

Style

When it's used in combination with a sbb-expansion-panel-header with an icon displayed via slot or iconName property,
the sbb-expansion-panel-content receives a padding on the left side in order to align it with the header label.

Slots

Name Description
Use the unnamed slot to add content to the sbb-expansion-panel.