Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori addizionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Releases Design Tokens Componenti Introduzione Base Informations Introduzione Base Componenti Introduzione Power-Apps Banner pubblicitari digitali SAP IA Design : Base. Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English Message Info

Was macht die Komponente?

Eine Message ist eine Benachrichtigung, die Nutzende über Informationen, Erfolge, Fehler oder andere Ereignisse in der Anwendung informiert. Im Unterschied zur Notification hat Sie keinen Status und keine Möglichkeit sich selbst auszublenden. Sie ist ins Layout integriert und eignet sich für inbesondere für Hinweise innherhalb von Listen.

Wann soll die Komponente eingesetzt werden?

  • Um Nutzende über Aktionen zu informieren, z.B. Erfolgs- oder Fehlermeldungen.
  • Im Gegensatz zur Alert- oder Notification-Komponente erzeugt es weniger Aufmerksamkeit.
  • Es eignet sich beispielsweise gut für Meldungen in leeren Listen.

Regeln

  • Die Message ist in das Layout zu integrieren und soll nicht wie die Alert- oder Notification-Komponente platziert werden.
Image Title Button SecondaryButton
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-image Ja
2 Komponente sbb-title Nein
3 Text Subtitle Ja
4 Text Legend Ja
5 Komponente sbb-secondary-button Ja
Demo

Spielwiese

Unfortunately, an error has occurred.

Please reload the page or try your search again later.

Error code: 0001
Bild Ja Nein Subtitle Ja Nein Legende Ja Nein Aktion Ja Nein Mode (System-Einstellung) Light Dark Hintergrund White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
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

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>

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.
Contatto

Avete domande? Forse le nostre FAQ o la nostra guida vi saranno d'aiuto, altrimenti potete inserire la vostra domanda nella board corrispondente su Github.

Impressum Contatto Protezione dei dati Impostazioni dei cookie