Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne 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 fonctionnelles 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 Base Composants Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Sticky-Bar Implementation

The sbb-sticky-bar is a component meant to be slotted inside a sbb-container component.
It is displayed with sticky positioning at the bottom of the container that contains it.

<sbb-container>
  <sbb-sticky-bar>
    <!-- Sticky bar content. -->
  </sbb-sticky-bar>
</sbb-container>

Slots

The sbb-sticky-bar content is provided via an unnamed slot.

Style

The sbb-sticky-bar inherits its variant from the sbb-container it's placed in.
Optionally the user can set the color property on the sbb-sticky-bar in order to override the one inherited by the sbb-container. The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container.

Properties

Name Attribute Privacy Type Default Description
color color public 'white' | 'milk' | undefined Color of the container, like transparent, white etc.
disableAnimation disable-animation public boolean false Whether the animation is enabled.

CSS Properties

Name Default Description
--sbb-sticky-bar-padding-block var(--sbb-spacing-responsive-xs) Block padding of the sticky bar.
--sbb-sticky-bar-bottom-overlapping-height 0px Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow.
--sbb-sticky-bar-z-index To specify a custom stack order, the z-index can be overridden by defining this CSS variable.

Slots

Name Description
Use the unnamed slot to add content to the sticky bar.
Beispiele
Standalone
Short Content
Short Content Milk
Default
Expanded
White
Milk
With Content After
Milk Container
Milk Container White Sticky Bar
HTML-Markup kopiert.
Impressum Contact Paramètres des cookies