Added in v2.3

Blazorise DockLayout component

Build IDE-like workspaces with docked panes, document areas, tab groups, splitters, auto-hide panes, and restorable layout state.

The <DockLayout> component owns the docking tree and state for a workspace. Use <DockPane> for tool and document panes, and give each pane a stable Name so state can be saved and restored later.

A pane can start on the left, right, top, bottom, or center document area. Users can move panes by dragging their headers, resize panes with splitters, group panes as tabs, auto-hide side panes, and close panes when enabled.

For simple layouts, place panes directly inside DockLayout. For advanced starting layouts, combine DockSplit and DockTabs to predefine the initial split and tab structure.

Examples

Basic workspace

A typical workspace uses a top toolbar, left explorer, center document pane, right properties pane, and bottom output pane.

<DockLayout Style="height: 28rem;" PaneBordered>
    <DockPane Name="toolbar" Caption="Toolbar" PanePosition="DockPanePosition.Top" Role="DockPaneRole.Tool" Resizable="false" ShowTab="false" AutoHideable="false" Closable="false">
        <DockPaneBody>
            Toolbar
        </DockPaneBody>
    </DockPane>

    <DockPane Name="explorer" Caption="Explorer" PanePosition="DockPanePosition.Left" Size="16rem" MinSize="10rem" Resizable>
        <DockPaneHeader>
            <Strong>Explorer</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 1
        </DockPaneBody>
    </DockPane>

    <DockPane Name="designer" Caption="Designer" PanePosition="DockPanePosition.Center" Role="DockPaneRole.Document" ShowTab="false" Closable="false">
        <DockPaneHeader>
            <Strong>Designer</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 2
        </DockPaneBody>
    </DockPane>

    <DockPane Name="properties" Caption="Properties" PanePosition="DockPanePosition.Right" Size="18rem" MinSize="12rem" Resizable>
        <DockPaneHeader>
            <Strong>Properties</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 3
        </DockPaneBody>
    </DockPane>

    <DockPane Name="output" Caption="Output" PanePosition="DockPanePosition.Bottom" Size="6rem" MinSize="4rem" Resizable>
        <DockPaneHeader>
            <Strong>Output</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 4
        </DockPaneBody>
    </DockPane>
</DockLayout>

Tabbed panes

Panes that share the same tab group can render as tabs. Tool panes usually place tabs at the bottom, while document panes usually place tabs at the top.

<DockLayout Style="height: 24rem;" PaneBordered>
    <DockPane Name="document" Caption="Document" PanePosition="DockPanePosition.Center" Role="DockPaneRole.Document" ShowTab="false" Closable="false">
        <DockPaneHeader>
            <Strong>Document</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 1
        </DockPaneBody>
    </DockPane>

    <DockPane Name="properties" Caption="Properties" PanePosition="DockPanePosition.Right" Size="18rem" TabPosition="DockPaneTabPosition.Bottom" Resizable>
        <DockPaneHeader>
            <Strong>Properties</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 2
        </DockPaneBody>
    </DockPane>

    <DockPane Name="report-explorer" Caption="Report Explorer" PanePosition="DockPanePosition.Right" Size="18rem" TabPosition="DockPaneTabPosition.Bottom" Resizable>
        <DockPaneHeader>
            <Strong>Report Explorer</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 3
        </DockPaneBody>
    </DockPane>
</DockLayout>

State

Use GetState, LoadState, or @bind-State to persist the layout after users move, resize, hide, or activate panes. The returned state can also be edited directly for advanced layouts. Keep pane names stable and call Refresh after changing an assigned state instance in place.

@using System.Text.Json

<DockLayout @ref="@dockLayout" Style="height: 24rem;" PaneBordered>
    <DockPane Name="actions" Caption="Actions" PanePosition="DockPanePosition.Top" Resizable="false" ShowTab="false" AutoHideable="false" Closable="false">
        <DockPaneBody Padding="Padding.Is2">
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Button Color="Color.Primary" Size="Size.Small" Clicked="@SaveState">Save state</Button>
                <Button Color="Color.Light" Size="Size.Small" Clicked="@LoadState" Disabled="@(savedStateJson is null)">Load state</Button>
                <Button Color="Color.Light" Size="Size.Small" Clicked="@ResetState">Reset</Button>
                <Text TextColor="TextColor.Secondary">@status</Text>
            </Div>
        </DockPaneBody>
    </DockPane>

    <DockPane Name="source" Caption="Source" PanePosition="DockPanePosition.Left" Size="15rem" MinSize="10rem" Resizable>
        <DockPaneHeader>
            <Strong>Source</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 1
        </DockPaneBody>
    </DockPane>

    <DockPane Name="preview" Caption="Preview" PanePosition="DockPanePosition.Center" Role="DockPaneRole.Document" ShowTab="false" Closable="false">
        <DockPaneHeader>
            <Strong>Preview</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 2
        </DockPaneBody>
    </DockPane>

    <DockPane Name="details" Caption="Details" PanePosition="DockPanePosition.Right" Size="17rem" MinSize="10rem" Resizable>
        <DockPaneHeader>
            <Strong>Details</Strong>
        </DockPaneHeader>
        <DockPaneBody>
            Content 3
        </DockPaneBody>
    </DockPane>
</DockLayout>

@code {
    private DockLayout dockLayout;

    private string savedStateJson;

    private string status = "No saved state.";

    private static JsonSerializerOptions StateSerializerOptions { get; } = new( JsonSerializerDefaults.Web );

    private Task SaveState()
    {
        if ( dockLayout is not null )
        {
            savedStateJson = JsonSerializer.Serialize( dockLayout.GetState(), StateSerializerOptions );
            status = "State saved.";
        }

        return Task.CompletedTask;
    }

    private async Task LoadState()
    {
        if ( dockLayout is not null && savedStateJson is not null )
        {
            DockLayoutState savedState = JsonSerializer.Deserialize<DockLayoutState>( savedStateJson, StateSerializerOptions );

            await dockLayout.LoadState( savedState );
            status = "State loaded.";
        }
    }

    private async Task ResetState()
    {
        if ( dockLayout is not null )
        {
            await dockLayout.ResetState();
            status = "Layout reset.";
        }
    }
}

API

Parameters

DockLayout

Parameter	Description	Type	Default
`ChildContent`	Specifies the panes and content to be rendered inside the dock layout.	`RenderFragment`	`null`
`PaneBordered`	Defines whether non-document panes should render a visible border.	`bool`	`true`
`SplitterThickness`	Defines the thickness, in pixels, of the splitters between dock panes.	`double`	`6`
`State`	Defines the mutable state used for docking, resizing, active tabs, and pane visibility. The same state can be saved with GetState and restored with DockLayoutState). Declarative values initialize this state and are reapplied by ResetState. In-place changes to the assigned instance are not detected; apply them with DockLayoutState) or follow them with Refresh.	`DockLayoutState`	`null`

DockPane

Parameter	Description	Type	Default
`AcceptPaneDrops`	Defines whether other panes can be dropped onto or around this pane.	`bool`	`true`
`AutoHide`	Initially auto-hides the pane content while keeping the pane available on its docked side.	`bool`	`false`
`AutoHideable`	Allows the pane header to show a pin action that toggles auto-hide behavior.	`bool`	`true`
`Caption`	Defines the caption used by tabbed dock groups.	`string`
`ChildContent`	Specifies the content to be rendered inside this DockPane.	`RenderFragment`	`null`
`Closable`	Allows the pane header to show a close action that hides the pane.	`bool`	`true`
`Collapsed`	Initially collapses the pane content while keeping the pane in the dock layout.	`bool`	`false`
`MaxSize`	Defines the maximum pane size when size constraints are applied.	`string`
`MinSize`	Defines the minimum pane size when size constraints are applied.	`string`
`Movable`	Allows the pane to be moved to another dock position by dragging its header.	`bool`	`true`
`Name`	Identifies the pane inside the parent DockLayout and acts as the stable key used by persisted DockLayoutState values.	`string`
`PanePosition`	Defines where the pane is initially docked inside the layout. Possible values:`Left`, `Right`, `Top`, `Bottom`, `Center`	`DockPanePosition`	`DockPanePosition.Left`
`Resizable`	Shows a splitter marker that indicates the pane can participate in resize behavior.	`bool`	`false`
`Role`	Defines whether this pane behaves as a tool pane or as a document pane. Possible values:`Tool`, `Document`	`DockPaneRole`	`DockPaneRole.Tool`
`ShowTab`	Defines whether this pane should display a tab when it is hosted inside a tab group.	`bool`	`true`
`ShowTabCloseButton`	Defines whether a close button should be shown when this pane is rendered as a document tab.	`bool`	`false`
`Size`	Defines the initial pane size, such as `280px`, `18rem`, or `25%`.	`string`
`TabPosition`	Defines where tabs should be displayed when this pane is hosted inside a tab group. Possible values:`Default`, `Top`, `Bottom`	`DockPaneTabPosition`	`DockPaneTabPosition.Default`
`Visible`	Initially shows or hides the pane in the dock layout.	`bool`	`true`

DockPaneHeader

Parameter	Description	Type	Default
`ChildContent`	Specifies the header content to be rendered inside this DockPaneHeader.	`RenderFragment`	`null`

DockPaneBody

Parameter	Description	Type	Default
`ChildContent`	Specifies the body content to be rendered inside this DockPaneBody.	`RenderFragment`	`null`

DockPaneFooter

Parameter	Description	Type	Default
`ChildContent`	Specifies the footer content to be rendered inside this DockPaneFooter.	`RenderFragment`	`null`

DockContent

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this DockContent.	`RenderFragment`	`null`

DockSplit

Parameter Description Type Default

Parameter	Description	Type	Default
`ChildContent`	Specifies the split child content.	`RenderFragment`	`null`
`Orientation`	Defines the initial split orientation. Possible values:`Horizontal`, `Vertical`	`Orientation`	`Orientation.Horizontal`
`Ratio`	Defines the initial first child ratio.	`double`	`0.5`

ChildContent

Specifies the split child content.

RenderFragment

null

Orientation

Defines the initial split orientation.

Possible values:Horizontal, Vertical

Orientation

Orientation.Horizontal

Ratio

Defines the initial first child ratio.

double

0.5

DockTabs

Parameter	Description	Type	Default
`ActivePane`	Defines the initially active pane name.	`string`
`ChildContent`	Specifies the tab child content.	`RenderFragment`	`null`

Events

DockLayout

Event	Description	Type
`StateChanged`	Occurs after the docking state changes.	`EventCallback<DockLayoutState>`

DockPane

Event	Description	Type
`Closing`	Callback invoked before the pane closes. Set DockPaneClosingEventArgs.Cancel to prevent closing.	`Func<DockPaneClosingEventArgs, Task>`

Methods

DockLayout

Method	Description	Return	Parameters
`ClosePane`	Closes a pane and removes it from the visible layout.	`Task`	`string paneName`
`GetState`	Returns a persistence snapshot of the current docking state.	`DockLayoutState`
`IsPaneOpen`	Indicates whether a pane is currently open.	`bool`	`string paneName`
`LoadState`	Loads a docking state and applies it to the current layout.	`Task`	`DockLayoutState state`
`OpenPane`	Opens a pane that was previously closed.	`Task`	`string paneName`
`Refresh`	Forces rendered dock content to refresh without changing the docking state. Call this after mutating the State instance directly.	`Task`
`ResetState`	Resets the docking state to the latest declarative layout definition.	`Task`
`ShowPane`	Shows a pane by opening it, activating it, or expanding its auto-hide flyout.	`Task`	`string paneName`
`TogglePane`	Toggles a pane between opened and closed states.	`Task`	`string paneName`

DockPane

Method	Description	Return	Parameters
`Refresh`	Forces rendered pane content to refresh without changing the docking state.	`Task`

Blazorise DockLayout component

Examples

Basic workspace

Tabbed panes

State

API

Parameters

DockLayout

DockPane

DockPaneHeader

DockPaneBody

DockPaneFooter

DockContent

DockSplit

DockTabs

Events

DockLayout

DockPane

Methods

DockLayout

DockPane

On this page