Split view
A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.
Web uniquement — React, depuis @krizaka/ui/split-view. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Messages, moderation queues, jobs, notifications.
- Any list the user works through item by item.
Quand ne pas l’utiliser
- For an object reached from elsewhere.À la place : Detail layout
- For rows to sort and select.À la place : Data table
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SplitView } from "@krizaka/ui/split-view";Exemples
Messages
A creator's inbox: threads beside the open one, a reply box at its foot.
Messages
Will part 3 be out before Friday?
Thursday evening — you'll be the first to know.
Nothing open
The list, and what to do while nothing is open.
Moderation
5 comments waiting.
Props
A list and its open item: two panes on a desktop, one at a time on a phone.
| Prop | Type | Défaut | Description |
|---|---|---|---|
listrequis | ReactNode | — | The items (a list of links, a DataTable). |
listTitlerequis | ReactNode | — | The list pane's title (Messages): it names the region. |
back | ReactNode | — | The way back to the list on a phone: your router's link (<Link href="/inbox">Messages</Link>). |
detail | ReactNode | — | The open item, or nothing. |
detailHead | ReactNode | — | The open item's head: its name, its actions. |
empty | ReactNode | — | What the detail pane says when nothing is open (desktop). |
listActions | ReactNode | — | Actions in the list's head (a search, a filter, a new item). |
listLabel | string | — | The list pane's accessible name when listTitle is not text. |
showDetail | boolean | false | On a phone, the open item replaces the list. Usually: an item is selected in the address. |
Accessibilité
- Each pane is a
section; the list's title is anh2. - On a phone the hidden pane is not rendered visibly (display none): it is not read either.
Bonnes pratiques
- Put the open item in the address (
?thread=lea) and passshowDetailfrom it: back and forward work, a link can be shared. - Mark the open item in the list with
aria-current. - Say what to do when nothing is open (
empty).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Settings layout
Settings: the sections on the side (a row of chips that scrolls on a phone) and the current section's forms, each a titled card with its own save.
Catalogue page
A catalogue or an index: the search in the hero, the filters in a sticky column beside the results (folded above them on a phone), the count, the results.