Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili 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.
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie