Message. Übersicht

Vorschau.

Unfortunately, an error has occurred.

Please reload the page or try your search again later.

Error code: 0001

Was macht die Komponente?

Eine Message zeigt eine Meldung im Seitenlayout, z.B. einen Hinweis, einen Fehler oder einen leeren Zustand. Sie besteht aus einem Titel und optional Untertitel, Bild, Fehlercode und einer Aktion. Im Unterschied zur Notification hat sie keinen Typ und kann sich nicht selbst ausblenden.

Wann soll die Komponente eingesetzt werden?

  • Für Meldungen, die Teil des Inhalts sind, z.B. in leeren Listen oder bei Fehlern beim Laden von Inhalten.
  • Wenn die Meldung weniger Aufmerksamkeit erzeugen soll als Alert oder Notification.
 Anwendung

Regeln.

  • Die Message wird ins Layout integriert und nicht wie Alert oder Notification platziert.
  • Titel und Text sagen klar, was passiert ist und was Nutzende tun können.
  • Eine Aktion (z.B. «Erneut versuchen») ist optional.

Spezifikation.

In Figma öffnen
Beispiele Default.
Auf Storybook ausprobieren HTML einblenden
No Image.
Auf Storybook ausprobieren HTML einblenden
No Error Code.
Auf Storybook ausprobieren HTML einblenden
No Action.
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-message> component can be used to display a complex message.

Slots.

The title slot should be used to slot a <sbb-title> element.
Optionally, the user can provide other elements such as a subtitle paragraph via the subtitle slot,
a sbb-image to provide an image via the image slot,
a paragraph to provide an error code via the legend slot,
and a sbb-button to provide a custom action via the action slot.

<sbb-message>
  <sbb-image slot="image" [...]></sbb-image>
  <sbb-title slot="title" level="3">Title</sbb-title>
  <p slot="subtitle">Subtitle</p>
  <p slot="legend">Error code: 0001</p>
  <sbb-button slot="action" [...]>Action</sbb-button>
</sbb-message>

Angular.

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

Angular-Übersicht Angular-API Angular-Beispiele API

class: SbbMessageElement, sbb-message.

Slots.

Name Description
action Use this slot to provide an sbb-secondary-button.
image Use this slot to provide an sbb-image component.
legend Use this slot to provide a legend, must be a paragraph.
subtitle Use this slot to provide a subtitle, must be a paragraph.
title Use this slot to provide an sbb-title.