Thành phần

Resizable

Resizable panels on react-resizable-panels: hairline handle with grip dots, 44px hit area, no hover effect.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Sources

Court filings and committee papers.

Draft

The report as it stands.

Install

bash

npx shadcn add @eloquent/resizable

This installs react-resizable-panels (Base UI has no resizable primitive).

Usage

tsx

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="40%" minSize="20%">Sources</ResizablePanel>
  <ResizableHandle withHandle aria-label="Resize the panels" />
  <ResizablePanel defaultSize="60%" minSize="20%">Draft</ResizablePanel>
</ResizablePanelGroup>

Sizes are pixels as numbers and percentages as strings. The group sets the layout direction with orientation (react-resizable-panels 4). Give every handle an aria-label.

States

Horizontal · hairline, no grip

One

Two

Vertical · grip dots

Above

Below

Disabled

Fixed

State	Treatment
Handle	1px ink rule; grip dots with `withHandle`
Hover	None
Dragging	The rule thickens to 3px, with no layout shift
Focus	2px ink outline, 2px offset
Disabled	Halftone rule, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from a handle
Arrow keys along the group's axis	Move the handle a step (Left / Right for side by side, Up / Down for stacked)
Home / End	Resize to the smallest or largest size the panels allow
Enter	Collapse or expand an adjacent collapsible panel

Vietnamese

Nguồn

Hồ sơ toà án và tài liệu của uỷ ban.

Bản thảo

Báo cáo ở trạng thái hiện tại.

Ink adaptation

Upstream draws a bordered, rounded grip on a muted divider. Here the handle is the ink hairline and the grip is dots only, with no box, radius, shadow or hover colour. Dragging thickens the rule to 3px without moving the panels. Built on react-resizable-panels, as Base UI has no resizable primitive.