Split View

Preview

About

Master-detail layout: a list panel and a detail panel side by side on wide screens (with a thin divider), collapsing to a single panel on mobile, where detail (when non-null) covers primary entirely.

• primary: the list panel (left side on wide screens).
• detail: the detail panel; null shows emptyDetail (wide) or just primary (narrow).
• emptyDetail: placeholder shown in the detail panel on wide screens when detail is null (e.g. "Select an item").
• primaryWidth: fixed width of the list panel on wide screens (defaults to 320).
• onCloseDetail: callback wired to the detail panel's back button on narrow screens (the detail panel is responsible for rendering its own back button).

Uses the kit's DeviceType.medium (768) breakpoint, the same breakpoint used across every responsive screen.

Last updated on 08/23/2026