Added in v2.3

Blazorise Resizer component

Add an accessible resizer to an existing panel, sidebar, or other resizable element.

The <Resizer> component is a lightweight separator that resizes an element without creating or managing a pane layout. Place it inside the element you want to resize, or use TargetId when the resized element is elsewhere in the document.

A vertical resizer changes width and defaults to the end edge. A horizontal resizer changes height and defaults to the bottom edge. Set Placement when the resizer belongs on the opposite edge.

The resize hit area is visually transparent by default, so it does not change the attached element's appearance. Keyboard focus is shown by a thin line inside that existing hit area without affecting layout. Enable ShowGutter to render the current provider's separator surface, borders, and grip.

Examples

Side panel

Place the resizer inside a relatively positioned element to resize its width. Use @bind-Value when the application also needs the committed value.

Explorer

Components

App.razor

Program.cs

Editor

Drag the boundary between the explorer and editor. Click it or reach it with Tab, then use the arrow keys.

<Div Flex="Flex.Row"
     Height="Height.Px( 260 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="@Width.Px( panelWidth )"
        Background="Background.Light"
         Padding="Padding.Is4">
        <Div Flex="Flex.Column" Gap="Gap.Is3">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Explorer</Heading>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.FolderOpen" />
                <Span>Components</Span>
            </Div>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.File" />
                <Span>App.razor</Span>
            </Div>
            <Div Flex="Flex.AlignItems.Center" Gap="Gap.Is2">
                <Icon Name="IconName.File" />
                <Span>Program.cs</Span>
            </Div>
        </Div>

        <Resizer Orientation="Orientation.Vertical"
                 Placement="Placement.End"
                 Min="160"
                 Max="360"
                 KeyboardStep="10"
                 @bind-Value="panelWidth"
                 AriaLabel="Resize explorer panel" />
    </Div>

    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Editor</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            Drag the boundary between the explorer and editor. Click it or reach it with Tab, then use the arrow keys.
        </Paragraph>
    </Div>
</Div>

@code {
    private double panelWidth = 220;
}

Provider-styled gutter

Enable ShowGutter to opt into a visible separator. This example also uses a horizontal resizer, where dragging downward increases the panel height.

Preview

Resize this area vertically.

Output

The remaining space stays available to the lower region.

<Div Flex="Flex.Column"
     Height="Height.Px( 360 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Height="@Height.Px( previewHeight )"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Preview</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            Resize this area vertically.
        </Paragraph>

        <Resizer Orientation="Orientation.Horizontal"
                 Placement="Placement.Bottom"
                 ShowGutter
                 Min="100"
                 Max="260"
                 @bind-Value="previewHeight"
                 AriaLabel="Resize preview height" />
    </Div>

    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is6" Margin="Margin.Is0.FromBottom">Output</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            The remaining space stays available to the lower region.
        </Paragraph>
    </Div>
</Div>

@code {
    private double previewHeight = 180;
}

External target

Set TargetId to resize another element. ResizeProperty can be a CSS custom property, which is useful when one value controls an element's width and related styles.

Canvas

The resizer is positioned at this boundary but targets the inspector by ID.

Inspector

Its width is read from the custom property applied by the resizer.

<Div Flex="Flex.Row"
     Height="Height.Px( 280 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div Flex="Flex.Grow.Is1"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Canvas</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            The resizer is positioned at this boundary but targets the inspector by ID.
        </Paragraph>
    </Div>

    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="Width.Px( 0 )">
        <Resizer TargetId="resizer-inspector"
                 Orientation="Orientation.Vertical"
                 Placement="Placement.Start"
                 ResizeProperty="--docs-inspector-width"
                 Min="180"
                 Max="360"
                 @bind-Value="inspectorWidth"
                 AriaLabel="Resize inspector panel" />
    </Div>

    <Div ElementId="resizer-inspector"
         Flex="Flex.Shrink.Is0"
         Style="@InspectorStyle"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0">Inspector</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is3.FromTop.Is0.FromBottom">
            Its width is read from the custom property applied by the resizer.
        </Paragraph>
    </Div>
</Div>

@code {
    private double inspectorWidth = 240;

    private string InspectorStyle
        => FormattableString.Invariant(
            $"--docs-inspector-width: {inspectorWidth}px; width: var(--docs-inspector-width);" );
}

Multiple targets

Use Targets to coordinate elements on both sides of the resizer. Resizing changes the start and end targets together while preserving their combined size. In this mode, Value, Min, and Max apply to the logical start target. TargetId and the component-level ResizeProperty apply only to single-target resizing. Both coordinated targets must resolve to elements; otherwise, the resizer remains inactive.

Navigation

This is the logical start target.

Workspace

This is the logical end target. Its width decreases as the navigation panel grows.

<Div Flex="Flex.Row"
     Height="Height.Px( 260 )"
     Border="Border.Is1.Rounded"
     Overflow="Overflow.Hidden">
    <Div ElementId="resizer-start-panel"
         Flex="Flex.Shrink.Is0"
         Style="width: 50%;"
         Background="Background.Light"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Navigation</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            This is the logical start target.
        </Paragraph>
    </Div>

    <Div Position="Position.Relative"
         Flex="Flex.Shrink.Is0"
         Width="Width.Px( 0 )">
        <Resizer Targets="@resizeTargets"
                 Orientation="Orientation.Vertical"
                 Placement="Placement.Start"
                 ShowGutter
                 KeyboardStep="10"
                 AriaLabel="Resize navigation and workspace panels" />
    </Div>

    <Div ElementId="resizer-end-panel"
         Flex="Flex.Shrink.Is0"
         Style="width: 50%;"
         Padding="Padding.Is4">
        <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Workspace</Heading>
        <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
            This is the logical end target. Its width decreases as the navigation panel grows.
        </Paragraph>
    </Div>
</Div>

@code {
    private readonly ResizerTargets resizeTargets = new()
    {
        Start = new()
        {
            ElementId = "resizer-start-panel",
            ResizeProperty = "width",
            MinSize = "120px",
        },
        End = new()
        {
            ElementId = "resizer-end-panel",
            ResizeProperty = "width",
            MinSize = "160px",
        },
    };
}

Vertical bar

A vertical Bar can expose its width through a CSS variable. Bind its Visible state and disable the resizer while the Bar is collapsed into small mode.

Resizable navigation

Resize the expanded Bar, then use its toggler to enter small mode. The resizer is disabled while collapsed.

<Layout Sider
        Height="Height.Px( 360 )"
        Border="Border.Is1.Rounded"
        Overflow="Overflow.Hidden">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar Mode="BarMode.VerticalInline"
                 CollapseMode="BarCollapseMode.Small"
                 @bind-Visible="barExpanded"
                 Style="@BarStyle"
                 Background="Background.Light"
                 ThemeContrast="ThemeContrast.Light">
                <BarToggler />
                <BarMenu>
                    <BarStart>
                        <BarItem>
                            <BarLink To="#resizer-projects">
                                <BarIcon IconName="IconName.FolderOpen" />
                                Projects
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#resizer-reports">
                                <BarIcon IconName="IconName.ChartLine" />
                                Reports
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="#resizer-settings">
                                <BarIcon IconName="IconName.Settings" />
                                Settings
                            </BarLink>
                        </BarItem>
                    </BarStart>
                </BarMenu>

                <Resizer Orientation="Orientation.Vertical"
                         Placement="Placement.End"
                         ResizeProperty="--b-vertical-bar-width"
                         Min="180"
                         Max="360"
                         @bind-Value="barWidth"
                         Disabled="@(!barExpanded)"
                         AriaLabel="Resize navigation sidebar" />
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>

    <Layout>
        <LayoutContent Padding="Padding.Is4">
            <Heading Size="HeadingSize.Is5" Margin="Margin.Is0.FromBottom">Resizable navigation</Heading>
            <Paragraph TextColor="TextColor.Secondary" Margin="Margin.Is2.FromTop.Is0.FromBottom">
                Resize the expanded Bar, then use its toggler to enter small mode. The resizer is disabled while collapsed.
            </Paragraph>
        </LayoutContent>
    </Layout>
</Layout>

@code {
    private bool barExpanded = true;

    private double barWidth = 230;

    private string BarStyle
        => FormattableString.Invariant(
            $"--b-vertical-bar-width: {barWidth}px" );
}

Positioning

The resizer is absolutely positioned, so its containing element should establish a positioning context, usually with position: relative. Make sure an ancestor does not clip the resizer when it is placed outside the resized edge.

Keyboard and accessibility

The component renders an ARIA separator and supports arrow-key resizing. Click the resizer area or reach it with the Tab key, then use the arrow keys to resize. Use KeyboardStep to control the keyboard increment and provide an AriaLabel that describes the resized region. Min and Max apply to both pointer and keyboard interaction. Set Max when the layout has a defined upper bound so assistive technologies receive the same range. aria-controls identifies the single target or the logical start target in coordinated mode.

API

Parameters

Parameter	Description	Type	Default
`AriaLabel`	Describes the separator's purpose to assistive technologies. Uses a localized default when omitted.	`string`
`Disabled`	Prevents both pointer and keyboard resizing when enabled.	`bool`	`false`
`KeyboardStep`	Determines how many pixels each applicable arrow-key press adds or removes.	`double`	`10`
`Max`	Limits the target, or logical start target, in pixels; a null value leaves the upper bound unrestricted.	`double?`	`null`
`Min`	Prevents the target, or logical start target, from falling below this pixel value.	`double`	`0`
`Offset`	Moves the resizer outward from its configured edge by the specified number of pixels. Negative values move it inward.	`double`	`0`
`Orientation`	Controls the resize axis. Vertical resizers change width, while horizontal resizers change height. Possible values:`Horizontal`, `Vertical`	`Orientation`	`Orientation.Horizontal`
`Placement`	Positions the resizer on the target edge. In coordinated mode, target order determines the resize direction.	`Placement?`	`null`
`ResizeProperty`	Names the CSS property updated during single-target resizing. Coordinated targets define their own resize properties.	`string`
`ResizingInterval`	Throttles Resizing notifications to at least this many milliseconds apart.	`int`	`100`
`ShowGutter`	Displays the provider-styled gutter, borders, and grip when enabled. The resize area is transparent by default.	`bool`	`false`
`TabIndex`	Controls the resizer's position in the keyboard tab order while it is enabled.	`int`	`0`
`TargetId`	Identifies the element that receives size updates. Used only when Targets is not supplied.	`string`
`Targets`	Enables coordinated resizing of logical start and end targets while preserving their combined size. Both targets must resolve.	`ResizerTargets`	`null`
`Thickness`	Overrides the resizer thickness in pixels. Vertical resizers use it as width and horizontal resizers as height.	`double?`	`null`
`Value`	Supplies the controlled target size in pixels. In coordinated mode, this is the logical start-target size.	`double?`	`null`

Events

Event	Description	Type
`ResizeEnded`	Signals that resizing has finished, including canceled pointer interactions.	`EventCallback<ResizerEventArgs>`
`ResizeStarted`	Fires once when pointer or keyboard resizing begins.	`EventCallback<ResizerEventArgs>`
`Resizing`	Reports intermediate sizes at the cadence configured by ResizingInterval.	`EventCallback<ResizerEventArgs>`
`ValueChanged`	Occurs when a resize interaction commits a new value.	`EventCallback<double>`