Anteprima.

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.

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.

Specifica.

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Documentazione.

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.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

class: SbbMessageElement, sbb-message.

Slots.