Sticky-Kaufleiste — component.sticky-buy-bar
Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller)
Componentv1.0.1Commerceweb.documentweb.applicationbuilder.preview
Beispiele
Fixierte Kaufleiste (im Live-Einsatz erst nach dem ersten Scroll-Viewport sichtbar)
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
title * | string | — |
amount * | string | — |
originalAmount | string | "" |
ctaLabel | string | "In den Warenkorb" |
Events & Slots
Events: cart
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--sticky-buy-bar-action-on-primary | var(--color-action-on-primary) |
--sticky-buy-bar-action-primary | var(--color-action-primary) |
--sticky-buy-bar-action-primary-hover | var(--color-action-primary-hover) |
--sticky-buy-bar-border-default | var(--color-border-default) |
--sticky-buy-bar-elevation-overlay | var(--elevation-overlay) |
--sticky-buy-bar-radius-control | var(--radius-control) |
--sticky-buy-bar-surface-overlay | var(--color-surface-overlay) |
--sticky-buy-bar-text-default | var(--color-text-default) |
Genutzte Design-Tokens
border.hairline color.action.on-primary color.action.primary color.action.primary-hover color.border.default color.surface.overlay color.text.default elevation.overlay font.family.default layer.toast layout.container radius.control size.3 size.4 size.6 size.8 text.md weight.semibold