Ouro HX

Layout

ResizableHandle

The draggable line between two panels in a ResizablePanelGroup, a focusable window splitter (role="separator") for the panel before it. Drag it, or focus it and use the arrow keys (10% a press), Home and End (that panel's smallest and largest size) and Enter (collapse the panel to its smallest size and back). It has a 44px hit area on touch screens.

import { ResizableHandle } from "@/components/ouro/resizable/resizable";

Example

<ResizableHandle />
<ResizableHandle aria-label="Resize the preview" />

Use instead when

  • Use Resizable instead, which places these for you.

Props

Type: ResizableHandleProps.

aria-label
Type: string
This handle's accessible name, in place of the group's handleLabel ("Resize Files").

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • withHandle: Not a prop. The handle always shows its grip: <ResizableHandle />.
Source on GitHubThis page as Markdown