Journey-Header – digital.sbb.ch

Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch

Journey-Header.

Info

Was macht die Komponente?

Sie definiert die Darstellung einer Reise oder Verbindung und besteht aus einer Start- und Ziel-Destination und einem Icon dazwischen, welches die Richtung (Einfache Fahrt, Hin- und Retour-Fahrt) definiert.

Wann soll die Komponente eingesetzt werden?

Im Fahrplan-Kontext, z.B. Als Titel einer Reiseroute.

Regeln.

Achte darauf, dass das semantische Level korrekt gesetzt wird, damit die SEO gewährleistet ist.

Anatomie

Nummer	Typ	Beschreibung	Optional	Hinweis
1	Text	Start	Nein	Kann via Property gesetzt werden: `origin="Station"`
2	Komponente	`sbb-icon`	Nein	Kann via Property gesteuert werden: `round-trip`
1	Text	Ziel	Nein	Kann via Property gesetzt werden: `destination="Station"`

Demo

Spielwiese.

Visual-Level

Negativ

Nein

Retour

Nein

Mode

(System-Einstellung)

Light

Dark

Hintergrund

White

Midnight

Milk

Charcoal

Cloud

Iron

Midnight

White

Charcoal

Milk

Iron

Cloud

Default.

Visual Level 4.

Visual Level 6.

Round Trip.

Negative.

Short Text.

HTML in Zwischenablage kopiert.

Implementation

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>

API Documentation.

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.