Detail layout
One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.
Web uniquement — React, depuis @krizaka/ui/detail-layout. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. the web apps' adoption: Orochia (PS5), Orazaka (PS6): the page of one video, job or account.
Quand l’utiliser
- A video, a job, an account, a pack, an order.
- Any object reached from a list.
Quand ne pas l’utiliser
- For a list and its item side by side.À la place : Split view
- For a screen of figures.À la place : Dashboard layout
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { DetailLayout } from "@krizaka/ui/detail-layout";Exemples
A video
Orochia's video page: thumbnail, status, facts, tabs and the sales beside.
Video · v-2087
Night shoot, part 2
Published- 12:48
- Unlock €4.99
- 18+ checked
Tip checkout
Who is paid, the amount in one tap, an optional word, the total beside the pay button.
A job
An engine job without tabs or side panel.
Job · job-4822
Podcast transcript
RunningThe transcript appears here as it is written.
Props
One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel.
| Prop | Type | Défaut | Description |
|---|---|---|---|
titlerequis | ReactNode | — | The object's name: the h1. |
actions | ReactNode | — | The object's actions (edit, publish, a DropdownMenu). |
aside | ReactNode | — | The side panel: details, related objects, activity (under the content on a phone). |
back | ReactNode | — | The way back to the list: your router's link (<Link href="/videos">Videos</Link>), drawn with its arrow. |
eyebrow | ReactNode | — | A mono line above the name (the object's kind, its id). |
media | ReactNode | — | A thumbnail, a cover or an avatar beside the name. |
meta | ReactNode | — | Under the name: its facts (the author, a date, a count — Facts or plain text). |
status | ReactNode | — | Beside the name: its status (a Badge). |
tabs | ReactNode | — | Under the header: the object's tabs (Tabs.List of
@krizaka /ui/tabs, inside your Tabs.Root around the layout). |
Accessibilité
- The name is the page's
h1. - The side panel is an
aside; on a phone it comes after the content in reading order.
Bonnes pratiques
- The status beside the name, in words (a Badge), not only a colour.
- Two or three actions at most in the header; the rest in a DropdownMenu.
- Put the tabs'
Tabs.Rootaround the layout so the content follows the tab.
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