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 only — React, from @krizaka/ui/split-view. Beta: its API may still change in a minor version.
Why it is here. the web apps' adoption: Orochia (PS5), Orazaka (PS6): messages and any list-and-detail screen.
When to use
- Messages, moderation queues, jobs, notifications.
- Any list the user works through item by item.
When not to use
- For an object reached from elsewhere.Use instead: Detail layout
- For rows to sort and select.Use instead: Data table
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SplitView } from "@krizaka/ui/split-view";Examples
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.
Notifications centre
What happened, newest first and grouped by day; the selected one opens beside the list.
Notifications
Today
- Mina unlocked “Night shoot, part 2”
- Your payout of €120 was sent
Yesterday
- Léa bid €25 on the auction
€4.99 unlocked at 09:40. Your share, €4.49, is paid out on Monday.
Find a place nearby
The map is the page; the list beside it says the same in words and moves with it.
Pick-up points
Props
A list and its open item: two panes on a desktop, one at a time on a phone.
| Prop | Type | Default | Description |
|---|---|---|---|
listrequired | ReactNode | — | The items (a list of links, a DataTable). |
listTitlerequired | 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. |
Accessibility
- 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.
Best practices
- 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).
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub