Sticky-Kaufleiste
Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller)
Nutzt: ui.price
Beispiele
Fixierte Kaufleiste (im Live-Einsatz erst nach dem ersten Scroll-Viewport sichtbar)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| title * | string | — | Titel |
| amount * | string | — | Preis |
| originalAmount | string | "" | Streichpreis |
| ctaLabel | string | "In den Warenkorb" | CTA |
* Pflicht-Prop
Events & Slots
Events:
⚡ cart — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| 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.hairlinecolor.action.on-primarycolor.action.primarycolor.action.primary-hovercolor.border.defaultcolor.surface.overlaycolor.text.defaultelevation.overlayfont.family.defaultlayer.toastlayout.containerradius.controlsize.3size.4size.6size.8text.mdweight.semibold