Yugen UI

Resizable

Resizable chia một vùng thành các panel mà người dùng kéo để đổi kích thước, thu gọn / mở rộng, theo chiều ngang hoặc dọc.

Dựa trên react-resizable-panels v4. defaultSize / minSize dạng chuỗi “30%” là phần trăm, dạng số là pixel. Đường chia mảnh stroke-2, chuyển brand khi hover / kéo. Bàn phím khi focus đường chia: mũi tên đổi 5%, Home / End về cực, Enter thu gọn / mở rộng, F6 sang đường chia kế. Nhấp đúp đường chia đưa panel về defaultSize. persistKey lưu bố cục vào localStorage. Ở RTL, nhóm ngang hiển thị phải → trái; kéo và phím mũi tên đi theo hướng nhìn thấy.
Thanh bên
Nội dung
Terminal

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Thư mục
Kéo rồi tải lại trang

Lưu bố cục

persistKey ghi bố cục vào localStorage sau mỗi lần kéo (bọc try/catch); đặt id cố định cho từng panel. Kéo rồi tải lại trang.

Tiêu đề
Nội dung

Dọc có grip

orientation="vertical" và ResizableHandle withHandle.

الشريط الجانبي
المحتوى

RTL lật thứ tự

Panel đầu tiên nằm bên phải; kéo và ArrowLeft / ArrowRight di chuyển đường chia đúng hướng nhìn thấy. mirrorInRtl={false} giữ bố cục LTR như bản cũ.

Cách dùng

Nên
  • Đặt minSize để panel không bị kéo mất nội dung; collapsible cho panel phụ (thanh bên, terminal).
  • Dùng collapseButton cho panel người dùng hay ẩn / hiện; Enter trên đường chia làm cùng việc.
  • Đặt id cố định cho panel khi dùng persistKey; đặt khung chứa có chiều cao cố định cho group dọc.
Không nên
  • Không chia quá 3–4 panel trong một group.
  • Không bỏ ResizableHandle giữa hai panel — ở RTL, chỉ đường chia mới được lật hướng kéo.
  • Không dùng Resizable cho bố cục người dùng không cần tuỳ chỉnh.

Props

Prop · KiểuMặc địnhMô tả
ResizablePanelGroup.orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng chia panel.
ResizablePanelGroup.persistKeystringMặc định: —Lưu / khôi phục bố cục qua localStorage (khoá react-resizable-panels:<persistKey>).
ResizablePanelGroup.mirrorInRtlbooleanMặc định: trueRTL: hiển thị nhóm ngang phải → trái (kéo / phím mũi tên theo hướng nhìn thấy); false = giữ bố cục LTR.
ResizablePanelGroup.onLayoutChanged(layout: Layout, meta) => voidMặc định: —Gọi sau khi kéo xong — dùng để lưu bố cục theo cách riêng.
ResizablePanel.defaultSize / minSize / maxSizenumber | stringMặc định: —Chuỗi “30%” = phần trăm, số = px. Nhấp đúp đường chia trả về defaultSize.
ResizablePanel.collapsible / collapsedSizeboolean / number | stringMặc định: false / "0%"Cho phép thu gọn panel (kéo qua minSize, Enter, hoặc nút).
ResizableHandle.withHandlebooleanMặc định: falseHiện grip ở giữa đường chia.
ResizableHandle.collapseButton"before" | "after"Mặc định: —Nút thu gọn / mở rộng panel trước (trên / đầu dòng) hoặc sau đường chia; panel đó phải collapsible.
ResizableHandle.collapseLabel / expandLabelstringMặc định: "Collapse panel" / "Expand panel"Chú thích (title) của nút.
ResizableHandle.disabled / disableDoubleClickbooleanMặc định: falseKhoá đường chia / tắt nhấp đúp để đặt lại.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.resizable

Khoá · KiểuMặc định (tiếng Anh)messagesVi
collapsestring

Chú thích (title) nút thu gọn panel của ResizableHandle.

Mặc định (tiếng Anh)"Collapse panel"messagesVi"Thu gọn panel"
expandstring

Chú thích (title) nút mở rộng panel của ResizableHandle.

Mặc định (tiếng Anh)"Expand panel"messagesVi"Mở rộng panel"