Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs supplémentaires Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants Aperçu Power-Apps Bandeaux publicitaires numériques SAP IA Design : Bases Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Navigation-Marker Info

Was macht die Komponente?

Sie ist Teil der Navigation-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Navigation-Komponente.
Navigation-Button Navigation-Link Navigation
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
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 Size L
Size S
Size L Active
Size S Active
HTML in Zwischenablage kopiert.
Implementation

The sbb-navigation-marker component is a collection 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' 'l' / 's' (lean) Marker size variant, either s or l.

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.