Aperçu.

Was macht die Komponente?

Ein Status zeigt den aktuellen Zustand eines Objekts, Prozesses oder Systems an. Er besteht aus Icon, optionalem Titel und kurzem Text. Die Farbe richtet sich nach dem Typ: Info, Success, Warning, Error, Pending, Incomplete, Not started oder In progress.

Wann soll die Komponente eingesetzt werden?

• Um Nutzende über den aktuellen Zustand eines Prozesses, Systems oder Objekts zu informieren.

Regeln.

• Verwende pro Zustand in der ganzen Anwendung immer denselben Typ.
• Halte den Text kurz.
• Für Screenreader: Der Text soll nur Inline-Inhalt enthalten. Bei dynamischen Änderungen kann role="status" gesetzt werden.

Spécification.

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Documentation.

The <sbb-status> is a component that has the purpose to show the user short messages to update the current status.
The status element displays a brief text message preceded by the status icon.

The <sbb-status> is structured in the following way:

• Icon: informs user about the current status type
• Title (optional): gives user an overview of the message
• Message: provide the information to the user

<sbb-status>Status info text</sbb-status>

Variants.

The <sbb-status> supports eight types, based on the type of the information displayed:

• info (default)
• success
• warn
• error
• pending
• incomplete
• not-started
• in-progress

<sbb-status type="info">...</sbb-status>
<sbb-status type="success">...</sbb-status>
<sbb-status type="warn">...</sbb-status>
<sbb-status type="error">...</sbb-status>
<sbb-status type="pending">...</sbb-status>
<sbb-status type="incomplete">...</sbb-status>
<sbb-status type="not-started">...</sbb-status>
<sbb-status type="in-progress">...</sbb-status>

Title.

An optional <sbb-title> can be slotted.

<sbb-status>
  <sbb-title level="3">Title</sbb-title>
  Status info text
</sbb-status>

Icon.

The icon is primarily predefined and bound to the status.
However, it's possible to override this by using iconName property or icon slot.

Style.

The <sbb-status> use default message colors, based on the chosen type.

Accessibility.

The message text is wrapped into a <p> element to guarantee the semantic meaning.
Avoid slotting block elements (e.g. <div>) as this violates semantic rules and can have negative effects on screen-readers.

If needed, the role="status" attribute can be added on the component's tag.

<sbb-status role="status" type="error">An error occurred.</sbb-status>

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

class: SbbStatusElement, sbb-status.

Properties.

CSS Properties.

Slots.