List and detail

A list and the item open from it. One pane at a time on a phone — the list, then the item with the way back — and both side by side when the room holds them, decided by the width the layout is given, not by the device.

Web · n/aMobile · ✓Bureau · n/aBêtaMise en page

List and detail — Inbox, tel que React Native le rend

« Inbox », son histoire React Native à la largeur d’un téléphone — le même code sur iOS et Android.

Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.

Web · n/a. On the web the same two panes are the split view. → Split view
Bureau · n/a. The Mac app's window is the web: its list and detail are the split view. → Split view

Pourquoi il est là. the native apps: Yomizaka and Akinaza mobile, Orazaka mobile: messages, jobs and files as one pane on a phone and two on a tablet (krizaka-ui#753).

Quand l’utiliser

Messages, jobs, files: a list where each item opens a screen of its own.
An app that must work on a phone and a tablet with the same screens.

Quand ne pas l’utiliser

A list whose items open nothing.À la place : List
A detail that is a full-screen flow.À la place : Form flow

Installation

Installer

npx expo install react-native-svg
npm install @krizaka/ui

Importer

import { ListDetail } from "@krizaka/ui/native";

Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.

Exemples

React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.

Inbox

Messages: the list, then the message with the way back; both side by side on a tablet.

Props

The two panes of a list and its item, or one of them, chosen by the width of the room.

Prop	Type	Défaut	Description
`backLabel`requis	`string`	—	The way back to the list, shown when one pane shows at a time (`Messages`).
`list`requis	`ReactNode`	—	The list: a `List`, which scrolls itself.
`listTitle`requis	`string`	—	The list pane's title (`Messages`), the large title of the list.
`onBack`requis	`() => void`	—	Closes the open item: the app clears its selection.
`detail`	`ReactNode`	—	The open item, or nothing when none is open.
`detailActions`	`ReactNode`	—	Buttons at the right of the detail's bar.
`detailTitle`	`string`	—	The open item's title, in the bar of the detail.
`empty`	`string`	—	What the detail pane says when nothing is open and both panes show (`Select a message`).
`fontScale`	`number`	—	The text scale to lay out for; by default the system's.
`listActions`	`ReactNode`	—	Buttons at the right of the list's bar (a new item, a filter).
`listWidth`	`number`	`340`	The list pane's width when both show (default 340).
`minDetailWidth`	`number`	`400`	The least width the detail needs beside the list (default 400): below it, one pane at a time.
`testID`	`string`	—	For tests.

Accessibilité

Each pane has its own heading (the large title of the list, the title in the bar of the detail).
On one pane the back button is named by backLabel (the list's title); both panes show no back button.

Bonnes pratiques

The app owns the selection: pass detail when an item is open, undefined when none is; onBack clears it. Keep it in the address (expo-router) so the back gesture works.
Give the list a List (it scrolls itself) and the detail a plain content (it scrolls inside the layout).
Both panes show from listWidth + minDetailWidth points (340 + 400 by default); at 200 % text the detail needs twice its width, so a tablet at the largest text size shows one pane.
Say what the empty detail means (empty: « Select a message »): it only shows when both panes do.

Générée depuis le code de @krizaka/ui 3.69.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub