Patrons
Sticky action
The one action of a page held at the bottom edge of a phone's screen while it scrolls — pure CSS, not drawn from md up.
import { StickyAction } from "@krizaka/ui/sticky-action";Web uniquement — React, depuis @krizaka/ui/sticky-action. Bêta : son API peut encore changer à une version mineure.
- Mobile · n/a. A native screen has its own bottom bar. → Floating action button
Pourquoi il est là. Used by Akinaza.
Quand l’utiliser
- A public page with one thing to do (book, buy, contact) that must stay within thumb reach on a phone.
Quand ne pas l’utiliser
- An app's navigation on a phone.À la place : Rail nav
- Several equal actions.À la place : Action bar
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { StickyAction } from "@krizaka/ui/sticky-action";Exemples
Phone
A scrolling page with its one action stuck to the bottom edge.
Hidden while the page's own action shows
hideWhileVisible="#hero-book": the bar appears only once the hero's button has scrolled away.
Props
The one action of a page, held at the bottom edge of a phone — or, in task mode, of the form on every width.
| Prop | Type | Défaut | Description |
|---|---|---|---|
hideWhileVisible | string | — | A CSS selector of the page's own action (#hero-book): while it is on screen the bar is hidden, so a phone never shows
two « Book » at once. The bar keeps its place (no layout shift), cannot be focused or pressed while hidden. |
mode | "phone" | "task" | phone | phone: the bar of a phone only. task: on every width, for a form the person is finishing. |
summary | ReactNode | — | task only: what the action commits (Total 1 250,00 $), at the left of the action; stacked above it on a phone. |
Accessibilité
- A plain container (a client component since
hideWhileVisible): the action inside keeps its own role and name; while hidden the bar isinertandaria-hidden. Inphonemode it is not rendered frommdup (display: none); intaskmode it stays, with thesummary(the total) read before the action.
Bonnes pratiques
- Put it as the last child of the page's
main: a sticky element holds the edge inside its container. hideWhileVisible="#hero-book"hides the bar while the page's own button is on screen (an IntersectionObserver): the bar keeps its place, so nothing shifts, and cannot be focused or pressed while hidden. Under reduced motion it only fades. Reserve its height withscroll-padding-bottomso a focused element is never covered.- One
Buttonwith a verb (« Book »); hide the same button from the hero on a phone so it is not shown twice. - It clears the home indicator through the safe-area inset.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub