Page layouts
PageLayoutControl · SplitterControl · DashboardLayoutControlAn application shell with collapsible side panels and a splitter, and a dashboard grid.
Overview
Three ways to divide a page. PageLayoutControl is a flex row of LeftPanelControl,
CenterPanelControl and RightPanelControl; the side panels collapse to a 20px tab.
SplitterControl puts a draggable bar between two panes, in pixels or as a share of the container,
with keyboard resizing. DashboardLayoutControl is a CSS grid of panels placed by row, column and span; change those values and the grid re-flows.
Examples
#Application shell: panels and a splitter
PageLayoutControl rows up a navigation panel, the centre and a properties panel; each side panel collapses from its own tab or from the icon buttons in the centre, because Collapsed binds two ways. The centre holds a SplitterControl: drag the bar, or Tab to it and use the arrow keys, Home and End; double-click restores the first size. Bind PrimarySize two ways and persist from OnResizeCommitted, which fires once per gesture. The navigation, list and properties are wired together, so click around.
#Dashboard grid
Columns sets the grid; each panel takes Row, Column, SizeX and SizeY, here from page state. Click a KPI card to expand it across the row and back; hover one for its comparison. A panel is exactly its grid box, so spans are chosen to fit the cards. No script.
Documentation
PageLayoutControl and panels
| Parameter | Type | Default | Description |
|---|---|---|---|
PageLayoutControl.Height | string? | "100%" | Height of the flex row; panels fill it. |
PageLayoutControl.CssClass | string? | null | Extra classes on the row. |
Left/RightPanelControl.Width | string? | "250px" | Panel width when open. |
Left/RightPanelControl.Collapsible | bool | false | Shows the 20px tab that collapses the panel. |
Left/RightPanelControl.Collapsed | bool | false | Collapsed state. Two-way with @bind-Collapsed. |
CenterPanelControl | | — | Takes the remaining width. Only CssClass and content. |
SplitterControl
| Parameter | Type | Default | Description |
|---|---|---|---|
PrimaryContent / SecondaryContent | RenderFragment? | — | The two panes. Primary is left or top. |
Vertical | bool | true | true: vertical bar, panes side by side. false: horizontal bar, panes stacked. |
PrimarySize | double | 240 | Primary pane size in px, or percent in Proportional mode. Bind it two ways: a parent re-render otherwise resets the pane to the parameter value. |
SizeMode | SplitterSizeMode | Pixel | Pixel keeps the size through container resizes; Proportional keeps the ratio, pure CSS. |
OnResizeCommitted | EventCallback<double> | — | Fires once when a drag or key press finishes. Persist from here. |
ResizeOnRelease | bool | true | Guide while dragging, panes resize on release. false resizes live through the server. |
MinPrimarySize / MaxPrimarySize | double | 80 / 1200 | Pixel limits. |
MinPrimary / MaxPrimary / MinSecondary | string? | null | Limits that also take a percentage; they win over the pixel ones. |
ShrinkPrimaryToContent | bool | false | Caps the primary pane at its content size. |
DefaultPrimarySize / ResetOnDoubleClick | double? / bool | null / true | Size restored by a double-click; defaults to the first size seen. |
KeyboardStep | double | 16 | Arrow-key step in px, or percentage points in Proportional mode. |
SplitterSize | double | 6 | Bar thickness in px. |
Disabled | bool | false | Bar cannot be dragged or focused. |
Height / Width | string? | null | Container size. |
Title | string | "Resize" | Bar tooltip and accessible name. |
CssClass / Style | string? | null | On the container. |
DashboardLayoutControl and DashboardLayoutPanel
| Parameter | Type | Default | Description |
|---|---|---|---|
Columns | int | 1 | Grid columns, equal width. |
CellSpacing | double[]? | null (0, 0) | Column and row gap in px, as a two-element array. |
CellAspectRatio | double | 1 | Height of one cell relative to its width; 1 is square. A panel is exactly its grid box and does not grow for tall content. |
CssClass | string? | null | Extra classes on the grid. |
Panel.Row / Panel.Column | int | 0 | Zero-based placement. |
Panel.SizeX / Panel.SizeY | int | 1 | Column and row span. |
Panel.ContentTemplate / ChildContent | RenderFragment? | — | Panel content; the template wins when both are set. |
CSS classes
| Class | Effect |
|---|---|
fx-page-layout · fx-left-panel · fx-center-panel · fx-right-panel | Flex row and its panels. Side panels: grey, bordered, scroll their own content; .fx-panel-collapsed at zero width. |
fx-panel-toggle · -left · -right | The 20×40px collapse tab, hung outside the panel edge. |
fx-splitter · -vertical · -horizontal · -disabled | Container and orientation. |
fx-splitter-pane · -primary · -secondary · fx-splitter-bar · fx-splitter-grip | Panes, the bar and its grip. |
fx-splitter-overlay · fx-splitter-guide · fx-splitter-server-guide | Drag-time overlay and the guide line. |
fx-dashboard-layout · fx-dashboard-panels · fx-dashboard-panel | The grid, a display: contents wrapper, and each item with its grid placement and aspect ratio inline. |
CSS variables
| Variable | Fallback | Purpose |
|---|---|---|
--fx-splitter-size | 6px | Bar thickness; set by SplitterSize. |
--fx-zoom | 1 | Scales the collapse-tab glyph. |
Keyboard and accessibility
- Panel collapse tabs are native buttons titled "Collapse panel" / "Expand panel"; their only text is an arrow glyph.
- The splitter bar is a native button with
role="separator",aria-orientationand theTitleas its name. Arrow keys move it byKeyboardStep, Home and End go to the limits, double-click resets. - The splitter imports the library's own
splitter-control.jsfor the drag guide and measuring. No third-party script. Page layout and dashboard are CSS only. - Dashboard panels are plain grid items with no landmarks or headings of their own; give each panel's content a heading.