Side Panel

A SidePanel slides in from the edge of the page over its content, for details or a form that belongs beside the page rather than in place of it. The user can resize it with a drag handle on its inner edge, as they resize the navigation, and double-click the handle to reset it. It docks to the right, the end of the page, by default; set Position (position) to Start (start) to dock it on the left. The grid buttons open their record form in one when their location is a side panel.

Resizing

Resizing is on by default; set EnableResizing (enableResizing in React) to false for a fixed width. DefaultWidth, MinWidth and MaxWidth set the starting width and how far the user can take it, and the panel is never wider than the viewport. Give WidthStorageKey a key of the panel's own and it reopens at the width the user left it, across page loads. On a phone the panel takes the whole width and has no handle.

Header, body and footer

Title and FooterContent (title and footer in React) cover most panels. When the footer depends on state inside the content — a Save button enabled only once a form has changes — compose the panel instead: TitleTemplate and FooterContent in Blazor, and in React SidePanelHeader, SidePanelBody and SidePanelFooter, which can sit inside a context provider of your own.