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 Icon-Sidebar-Container Demo Default
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

The sbb-icon-sidebar-container is a component that holds together the sbb-icon-sidebar-content
and one or two sbb-icon-sidebar elements.

Inside the sbb-icon-sidebar-content another sbb-icon-sidebar-container can be placed
to achieve multiple nested icon sidebars.

<sbb-icon-sidebar-container>
  <sbb-icon-sidebar>
    <sbb-icon-sidebar-link
      accessibility-label="Go to the party"
      icon-name="glass-cocktail-small"
      href="#"
    ></sbb-icon-sidebar-link>
  </sbb-icon-sidebar>
  <sbb-icon-sidebar-content role="main">Content</sbb-sidebar-content>
</sbb-icon-sidebar-container>

Style

If the sbb-sidebar-container is placed after the sbb-header, an automatic margin-block-start is added.
In other contexts you may need to set the margin manually, e.g. margin-block-start: var(--sbb-header-height);.

Use with sbb-header

In order to correctly display the shadow of the header when scrolled,
you need to set the scrollOrigin property of the <sbb-header>.
The value should be either the id of the <sbb-sidebar-content> / <sbb-icon-sidebar-content>
or the element reference itself. Note that when using nested sidebars, it's required to
continuously update the scrollOrigin property with the id/reference of the
currently active <sbb-sidebar-content> / <sbb-icon-sidebar-content>. Also, depending
on how e.g. a RouterOutlet (Angular) is used, it may also be necessary to update the scrollOrigin
property when the navigation changes.

<sbb-header scroll-origin="content">...</sbb-header>
<sbb-icon-sidebar-container>
  <sbb-icon-sidebar>...</sbb-icon-sidebar>
  <sbb-icon-sidebar-content id="content" role="main">Content</sbb-sidebar-content>
</sbb-icon-sidebar-container>

Properties

Name Attribute Privacy Type Default Description
end - public SbbIconSidebarElement | null The icon-sidebar child at the end position.
sidebars - public SbbIconSidebarElement[] The icon-sidebar children.
start - public SbbIconSidebarElement | null The icon-sidebar child at the start position.

Slots

Name Description
Use the unnamed slot to add sbb-sidebar and sbb-sidebar-content elements.
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies