Patrons
Page header
The top of a page: a breadcrumb, the title, a description and the page's actions.
Web uniquement — React, depuis @krizaka/ui/page-header. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia.
Quand l’utiliser
- At the top of every page of an app: settings, dashboards, lists.
- With
actionsfor what applies to the whole page: export, create, withdraw.
Quand ne pas l’utiliser
- For the hero of a marketing page: compose it with the brand backdrop.À la place : Section backdrop
- For the title of a dialog.À la place : Dialog
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { PageHeader } from "@krizaka/ui/page-header";Exemples
Default
A title and a description.
Payouts
Your earnings are paid every Monday to the account on file.
With actions
The page's actions on the right.
Payouts
Your earnings are paid every Monday to the account on file.
With a breadcrumb
The product's own breadcrumb above the title.
Payouts
Your earnings are paid every Monday to the account on file.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
titlerequis | ReactNode | — | The title of the page (an h1, or as="h2"). |
actions | ReactNode | — | The page's actions: Buttons, a DropdownMenu. |
as | "h1" | "h2" | h1 | The heading level of the title: h1 for a page, h2 for a section that looks like one. |
breadcrumb | ReactNode | — | A breadcrumb (the product's own <nav aria-label>), shown above the title. |
description | ReactNode | — | A sentence under the title. |
Accessibilité
- The title is an
h1by default: the page's main heading. - In the breadcrumb, mark the current page with
aria-current="page".
Bonnes pratiques
- One page header per page, and its title is the page's only
h1(as="h2"for a section that looks like one). - One primary action at most in
actions. - The breadcrumb is a slot: pass your own
<nav aria-label="Breadcrumb">with router links.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub