ListDetail
A list with the picked record beside it: a ListView on one side and the record in a pane on the other, or one at a time on a phone.
Master
Pick invoices and the pane beside the list follows. Switch the list: groups splits it by status under headers that fold, template adds avatars, unread dots and status lines, actions puts every invoice action in a More menu, nested starts at the accounts, where a click steps into one's invoices with Back to return, and tree opens an account's invoices right under it. Set layout to stacked for the record under the list, or inline for the record under its row. Set the stage to phone: the list shows alone, a row opens the invoice over it, and Back returns. Turn the frame off to see the pattern on its own.
Usage
Use ListDetail when people go through records one after another without leaving the list: an invoice queue, an inbox, approvals. It is a blueprint: it composes kit pieces and keeps no state of its own. list is a kit ListView, usually with selection single and interaction drill; its onOpen tells the screen which record is open. detail is that record, built from kit Sections, FormDisplay and Tables; title names it and actions puts its Buttons at the end of the pane's header. open says a record is open. empty shows in the pane when none is, usually a kit EmptyState. The list can be any ListView: grouped by status under headers that fold, the inbox template with avatars, unread dots and status lines, or rows with a More menu; the pane works the same. When records sit under other records, give the ListView items with children: the list steps into them in place, with Back, and a leaf opens beside it, like accounts that hold their invoices. layout sets where the record goes: side puts it in a pane beside the list, stacked puts it under the whole list, and inline opens it right under its row, inside the list. With side, the frame measures its own width: from 640 up the list and the pane sit side by side (two fifths and three fifths); below, the list shows until a record opens, then the pane covers it with a Back button that calls onBack, named by backLabel. The page's name and trail are the kit PageHeader in the AppShell page around it. See contracts/listdetail.json for the full contract.
Do's
- Going through records one after another: an invoice queue, an inbox, approvals.
- A record short enough to read in a pane beside the list.
- A list that must stay in view while its records are read.
- Records under other records, like an account's invoices: a nested ListView steps in, and the leaf opens beside it.
- A long queue split by status: a grouped ListView keeps what needs attention on top.
- Stacked when the list is short and the record needs the full width; inline when people read one record at a time and want the rest of the list to stay in place around it.
Don'ts
- Do not add state to it; it is a blueprint. The screen keeps which record is open.
- Do not use it for records with a lot to show or edit. Drill into a RecordPage instead.
- Do not build the list inside it. Pass a kit ListView.
- Do not put the page's name inside it. That is the PageHeader in the frame around it.
- Do not use raw hex.
<ListDetail layout="side" />