ListDetailShell

Opinionated split layout for list-on-left / detail-on-right with selection state

Interactive-mode

Examples

With selection

Pick an item to see details.

No borders, wide list, gutters on

Pick an item to see details.

API

The element family below can be composed together. Click an element to jump to its properties.

Element Purpose

ListDetailShell Opinionated split layout: list on the left, detail on the right. Selection state is exposed through SelectedId / SelectedIdChanged so consumers can two-way bind. When SelectedId is null (or default(TId) for value types), the Empty slot renders instead of the Detail slot. Generic on TId — pass TId="string" (or any type) at the call site. Value-type consumers should use a nullable wrapper (e.g. TId="int?") to avoid default(int) == 0 colliding with a legitimate selection of 0. Wrapper-styling: the chunk owns list-pane width/fill and the optional divider line.

Element	Purpose
ListDetailShell	Opinionated split layout: list on the left, detail on the right. Selection state is exposed through `SelectedId` / `SelectedIdChanged` so consumers can two-way bind. When `SelectedId` is null (or `default(TId)` for value types), the `Empty` slot renders instead of the `Detail` slot. Generic on `TId` — pass `TId="string"` (or any type) at the call site. Value-type consumers should use a nullable wrapper (e.g. `TId="int?"`) to avoid `default(int) == 0` colliding with a legitimate selection of `0`. Wrapper-styling: the chunk owns list-pane width/fill and the optional divider line.

ListDetailShell

Opinionated split layout: list on the left, detail on the right. Selection state is exposed through SelectedId / SelectedIdChanged so consumers can two-way bind. When SelectedId is null (or default(TId) for value types), the Empty slot renders instead of the Detail slot. Generic on TId — pass TId="string" (or any type) at the call site. Value-type consumers should use a nullable wrapper (e.g. TId="int?") to avoid default(int) == 0 colliding with a legitimate selection of 0. Wrapper-styling: the chunk owns list-pane width/fill and the optional divider line.

Property	Type	Description
List	RenderFragment?	Left-pane list slot. The chunk owns the pane width (`ListWidth`), fill (`ListBgFilled`), and divider (`Borders`) — put only list-item markup here.
Detail	RenderFragment?	Right-pane detail slot. Renders when `SelectedId` is non-null/non-default.
Empty	RenderFragment?	Right-pane fallback. Renders when `SelectedId` is null/default. Use for prompts like "Pick an item to see details."
SelectedId	TId?	The currently-selected id. Two-way bindable via `SelectedIdChanged`.
SelectedIdChanged	EventCallback<TId?>	Fires when the selection changes. Pair with `SelectedId` for two-way binding.
Borders	bool	Toggles the `divide-x divide-border` line between the list and detail panes. Default: `true`.
Gutters	bool	Toggles `p-4` on the Detail/Empty wrapper, giving the right pane breathing room without needing wrapper divs in slot content. Default: `true`.
ListWidth	Size	Width of the list pane via the shared `Size` enum (mapped through `SizeClasses.Width`). Default: `Size.Md` (`w-56`). Common values: `Sm` (`w-48`), `Lg` (`w-72`).
ListBgFilled	bool	Toggles `bg-background` on the list pane wrapper. Default: `true`.