Navigation-Marker

Info

Was macht die Komponente?

Sie ist Teil der Navigation-Komponente.

Wann soll die Komponente eingesetzt werden?

Nur innerhalb der Navigation-Komponente.

Übergeordnete Komponenten

Navigation

Enthaltene Komponenten

Navigation-Button

Navigation-Link

Anatomie

Nummer	Typ	Beschreibung	Optional
1	Komponente	`sbb-navigation-marker`	Nein
1a	Komponente	`sbb-navigation-link` oder `sbb-navigation-button`	Nein
2	Komponente	`sbb-navigation-section`	Nein
3	Text	Label	Nein
4	Komponente	`sbb-navigation-list`	Nein
4a	Text	Label	Nein
4b	Komponente	`sbb-navigation-link` oder `sbb-navigation-button`	Nein
5	Komponente	`sbb-transparent-button`	Nein

Demo

Beispiele

Size L

Size S

Size L Active

Size S Active

HTML-Markup kopiert.

Implementation

The sbb-navigation-marker component is a collection of of sbb-navigation-button
and sbb-navigation-link.
Its intended use is inside a sbb-navigation component.

<sbb-navigation-marker>
  <sbb-navigation-button id="nav1">Label 1</sbb-navigation-button>
  <sbb-navigation-button id="nav2">Label 2</sbb-navigation-button>
  <sbb-navigation-link href="https://www.sbb.ch/some/route">Label 3</sbb-navigation-link>
  <sbb-navigation-marker></sbb-navigation-marker
></sbb-navigation-marker>

Style

The component has a property named size which is proxied to all the sbb-navigation-button/sbb-navigation-link within it.
Possible values are l (default) and s.

<sbb-navigation-marker size="s">
  ...
  <sbb-navigation-marker></sbb-navigation-marker
></sbb-navigation-marker>

Properties

Name	Attribute	Privacy	Type	Default	Description
`size`	`size`	public	`'l' \| 's' \| undefined`	`'l'`	Marker size variant.

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`reset`	public			`void`
`select`	public		`action: SbbNavigationButtonElement \| SbbNavigationLinkElement`	`void`

Slots

Name	Description
	Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the `sbb-navigation-marker`.