ResizableHandle

Source: client/lib/theme/vueda-tailwind/shell/index.js

The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups.

Vue component: ResizableHandle

Slot	Default classes	Description
root	4 classes	The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups.
handle	bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs hairline hairline-border	The visible grip inside a resizable handle. It gives pointer users a small bordered target without changing the panel separator's actual layout width.

root

The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups.

Default classes:

bg-border relative flex w-hairline items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2
focus-visible:focus-ring
data-[orientation=vertical]:h-hairline data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0
[&[data-orientation=vertical]>div]:rotate-90

Source: client/lib/theme/vueda-tailwind/shell/ResizableHandle.theme.js:18

handle

The visible grip inside a resizable handle. It gives pointer users a small bordered target without changing the panel separator's actual layout width.

Default classes:

bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs hairline hairline-border

Source: client/lib/theme/vueda-tailwind/shell/ResizableHandle.theme.js:36