Resizable

Overview

Resizable implements its own drag logic in C#: ZitsResizableHandle measures the group’s main-axis pixel size once on pointer-down (a single JS interop call via the Navius core interop module), then a full-window transparent capture overlay routes every subsequent pointermove/pointerup back to the handle for the rest of the gesture (the Blazor-native stand-in for pointer capture). Each move converts the pixel delta to a percentage and asks ZitsResizablePanelGroup to re-balance the two adjacent panels’ flex-basis. There is no Navius UI primitive underneath; the core registry dependency is only the shared JS interop module used for the one getRect measurement.

Install

navius add resizable --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsResizablePanelGroup Direction="horizontal" class="max-w-md rounded-lg border md:min-w-[450px]">
    <ZitsResizablePanel DefaultSize="50">
        <div class="flex h-[200px] items-center justify-center p-6">One</div>
    </ZitsResizablePanel>
    <ZitsResizableHandle WithHandle="true" />
    <ZitsResizablePanel DefaultSize="50">
        <div class="flex h-full items-center justify-center p-6">Two</div>
    </ZitsResizablePanel>
</ZitsResizablePanelGroup>

Parts and props

Component	Prop	Type	Default	Description
ZitsResizablePanelGroup	Direction	string	"horizontal"	horizontal | vertical. Lays out children with flex-basis and drives the handle’s drag axis.
ZitsResizablePanel	DefaultSize	double	50	Initial size as a percent of the group’s main axis.
ZitsResizablePanel	MinSize / MaxSize	double	10 / 100	Clamp bounds in percent, enforced during drag/keyboard resize.
ZitsResizableHandle	WithHandle	bool	false	Shows a centered grip affordance (a lucide GripVertical icon) inside the handle.

Styling surface

Attributes on every part is merged with its preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter; panel sizing is controlled through DefaultSize/MinSize/MaxSize, not a class.

Data attribute hooks

Part	Attribute	Description
Handle	data-panel-resize-handle	Emitted by ZitsResizableHandle itself.
Handle	data-panel-group-direction	Mirrors the group’s Direction, emitted by both ZitsResizableHandle and ZitsResizablePanelGroup; drives the horizontal/vertical cursor and sizing classes.
Handle	data-resize-handle-active="pointer"	Present while a drag is in progress, emitted by ZitsResizableHandle itself.
Panel	data-panel	Emitted by ZitsResizablePanel itself.
Group	data-panel-group	Emitted by ZitsResizablePanelGroup itself.

The handle renders role="separator" with aria-orientation, aria-valuemin="0", aria-valuemax="100", and aria-valuenow (the preceding panel’s current size, rounded), so assistive tech can announce the split position and hear it update after each drag or arrow-key press. It is tabindex="0" and focusable; ArrowLeft/ArrowRight (horizontal) or ArrowUp/ArrowDown (vertical) resize the adjacent pair by a fixed 5% step per key press, mirrored by ZitsResizablePanelGroup.Resize.