Usage

Use RecordPage for a single record: an account, an invoice, a quote. It is a blueprint: it composes kit pieces and keeps no state of its own, so the screen owns the tab, the sections and what is open. Pass the kit PageHeader as header, with the trail, the record name, its status Badge and the record actions. tabs takes a kit Tabs of what belongs to the record, with counts. notice writes anything that needs saying about the record, as a kit Callout. toolbar takes a kit Toolbar for what acts on the tab that is showing; it stays at the top as the record scrolls, right under the compact header bar. summary takes a kit Scoreboard of the few numbers people came for. children are the details: kit Sections, each holding its FormDisplay rows straight in as children. columns (1, 2 or 3, default 2) and labelPosition (default start) are set once on the RecordPage and every Section of rows, or Form, inside the details follows them unless it sets its own; each column stops at 554px (--layout-column-max) and the rows stay at the start, so on a wide screen the space past the last column stays empty instead of stretching the rows. Never more than 3 columns, even at 2560px and wider. Related lists under the details, a Section holding a kit Table, keep the full width. Sections side by side use .layout-split from contracts/layout.json: two, three with .layout-split--thirds, or four with .layout-split--quarters. The name and the bar stay put; the tabs and the notice scroll away under them. A related list under the details is a Section holding a Table, which flows with the record rather than scrolling in a box of its own, so its header cells travel with it. onStickyChange says when the top has scrolled away: keep that boolean in the screen and pass it to the PageHeader as sticky, so the name shrinks to the kit's compact 52px bar whose trail ends in the record name. It goes in the AppShell page, which owns the page padding. See contracts/recordpage.json for the full contract.