Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Journey-Header. Übersicht

Aperçu.

Was macht die Komponente?

Der Journey-Header ist der Titel einer Reise oder Verbindung. Er zeigt Start und Ziel mit einem Icon dazwischen. Das Icon zeigt die Richtung: einfache Fahrt oder Hin- und Rückfahrt.

Wann soll die Komponente eingesetzt werden?

  • Im Fahrplan-Kontext, zum Beispiel als Titel einer Reiseroute.
 Anwendung

Regeln.

  • Das semantische Level (level) passt zur Überschriftenstruktur der Seite. Die Darstellung kann unabhängig davon über visual-level angepasst werden.
  • Für Screenreader wird die Verbindung automatisch beschrieben, zum Beispiel «Verbindung von A nach B».

Spécification.

Ouvrir dans Figma
Beispiele Default.
Auf Storybook ausprobieren HTML einblenden
Visual Level 4.
Auf Storybook ausprobieren HTML einblenden
Visual Level 6.
Auf Storybook ausprobieren HTML einblenden
Round Trip.
Auf Storybook ausprobieren HTML einblenden
Negative.
Auf Storybook ausprobieren HTML einblenden
Short Text.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

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

Storybook avec exemples interactifs Code source sur GitHub

Documentation.

The <sbb-journey-header> element inherits from the <sbb-title> component,
which is used to display the title of the journey.

The component has two required properties, named origin and destination,
which represents the two ends of the journey.
An icon is placed between them: if the property roundTrip is set to false (default),
the icon is an arrow pointing to the destination, otherwise it is a double arrow to display the round-trip.

<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>
Style.

The component has a level property, which is passed to its inner <sbb-title> component;
it is rendered as a heading from h1 to h6. Default level is 3.
It also has a visualLevel property, which can be used in scenarios
where the visual representation needs to be different from the semantic meaning of the title level.
The default visualLevel is 5.

The component also has a negative background variant.

<sbb-journey-header origin="Point A" destination="Point B" visual-level="4"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" level="5"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" negative></sbb-journey-header>
Accessibility.

The component sets an aria-label on its host element which is read by screen readers to provide a description of the journey.

The following example will be read as (locale: EN): Connection from Point A to Point B..

<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>

The following one will be read as (locale: EN): Connection from Point A to Point B and back to Point A..

<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>

Angular.

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

Aperçu Angular API Angular Exemples Angular API

class: SbbJourneyHeaderElement, sbb-journey-header.

Properties.

Name Attribute Privacy Type Default Description
destination destination public string '' Destination location for the journey header.
level level public '1' | '2' | '3' | '4' | '5' | '6' '3' Title level
negative negative public boolean false Negative coloring variant flag.
origin origin public string '' Origin location for the journey header.
roundTrip round-trip public boolean false Whether the journey is a round trip. If so, the icon changes to a round-trip one.
visualLevel visual-level public '1' | '2' | '3' | '4' | '5' | '6' | null '5' Visual level for the title.