Accordion. Übersicht

Vorschau.

Header 1 Content1 Header 2 Content2

Was macht die Komponente?

Versteckt Inhalt hinter einem Titel. Mit einem Klick auf den Titel kann der dazugehörige Inhalt ein- und ausgeblendet werden.

Wann soll die Komponente eingesetzt werden?

  • Um Inhalt zu strukturieren und die Informationsarchitektur einer Seite zu verbessern.
  • Um langes Scrollen zu vermeiden.

Ähnliche Komponente.

Flip-Card Anwendung

Regeln.

  • Ein Accordion besteht aus mindestens zwei Einträgen.
  • Accordions werden nicht ineinander verschachtelt.
  • Standardmässig ist nur ein Eintrag gleichzeitig geöffnet. Mehrere gleichzeitig offene Einträge sind möglich (multi).
  • Die Titel sind als Überschriften ausgezeichnet (titleLevel), passend zur Überschriftenhierarchie der Seite.

Spezifikation.

In Figma öffnen
Beispiele Default.
Auf Storybook ausprobieren HTML einblenden
Milk.
Auf Storybook ausprobieren HTML einblenden
Borderless.
Auf Storybook ausprobieren HTML einblenden
Disabled.
Auf Storybook ausprobieren HTML einblenden
Milk Borderless.
Auf Storybook ausprobieren HTML einblenden
With Icon.
Auf Storybook ausprobieren HTML einblenden
Expanded.
Auf Storybook ausprobieren HTML einblenden
Multi.
Auf Storybook ausprobieren HTML einblenden
Size S.
Auf Storybook ausprobieren HTML einblenden
Size S With Icon.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Storybook mit Live-Beispielen Quellcode auf GitHub

Dokumentation.

The <sbb-accordion> is a component which acts as a container
for one or more sbb-expansion-panel.

<sbb-accordion>
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
  </sbb-expansion-panel>
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 2</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 2</sbb-expansion-panel-content>
  </sbb-expansion-panel>
</sbb-accordion>
Interaction.

The multi property, if set, allows having more than one <sbb-expansion-panel> expanded at the same time.

<sbb-accordion multi> ... </sbb-accordion>
Style.

The component has two different sizes, s and l, which can be changed using the size property.
The property overrides the size value of any inner <sbb-expansion-panel>.

<sbb-accordion size="s"> ... </sbb-accordion>

The component has a titleLevel property, which is proxied to each inner <sbb-expansion-panel-header>, and can be used
to wrap the header of each <sbb-expansion-panel> in a heading tag; if the property is unset, a div is used.

In the following example, all the <sbb-expansion-panel-header> would be wrapped in a h3 heading tag.

<sbb-accordion title-level="3">
  <sbb-expansion-panel>
    <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header>
    <sbb-expansion-panel-content>Content 1</sbb-expansion-panel-content>
  </sbb-expansion-panel>
  ...
</sbb-accordion>

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

Angular-Übersicht Angular-API Angular-Beispiele API

class: SbbAccordionElement, sbb-accordion.

Properties.

Name Attribute Privacy Type Default Description
multi multi public boolean false Whether more than one sbb-expansion-panel can be open at the same time.
size size public 's' | 'l' | null null Size variant, either s (lean theme default) or l (standard theme default). The property overrides the size on any projected sbb-expansion-panel.
titleLevel title-level public '1' | '2' | '3' | '4' | '5' | '6' | null null The heading level for the sbb-expansion-panel-headers within the component.

Slots.

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