Yugen UI

Drawer

Drawer là bề mặt trượt vào từ cạnh màn hình, chứa điều hướng, bộ lọc hoặc nội dung phụ của trang.

Có hai kiểu: overlay (modal, có lớp phủ, dựng trên Radix Dialog — Drawer + DrawerSurface hoặc OverlayDrawer) và InlineDrawer nằm trong bố cục, đẩy nội dung bên cạnh. Vị trí start / end / bottom; kích thước small 320, medium 592, large 940 hoặc full. Bên trong dùng DrawerHeader, DrawerHeaderTitle, DrawerBody (cuộn) và DrawerFooter.

Điều hướng

Nội dung chính co giãn theo drawer, không bị lớp phủ che.

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 {  Drawer, DrawerTrigger, DrawerClose, DrawerSurface, OverlayDrawer, InlineDrawer,  DrawerHeader, DrawerHeaderTitle, DrawerBody, DrawerFooter,} 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.

Overlay drawer

Modal, có lớp phủ; nút chính đặt trước nút Huỷ ở footer.

Vị trí & kích thước

OverlayDrawer gộp Drawer + DrawerSurface; position start / end / bottom.

Cách dùng

Nên
  • Dùng overlay cho tác vụ tạm thời (bộ lọc, chi tiết bản ghi); inline cho điều hướng / panel luôn cần thấy.
  • Luôn có tiêu đề và cách đóng rõ ràng (nút X, Huỷ, Esc).
  • Chọn kích thước vừa nội dung; full chỉ cho màn hình nhỏ.
Không nên
  • Không mở drawer chồng lên drawer khác.
  • Không dùng drawer cho xác nhận ngắn — dùng Dialog.
  • Không đặt nhiều hơn 2–3 hành động ở footer.

Props

Prop · KiểuMặc địnhMô tả
DrawerSurface / OverlayDrawer.position"start" | "end" | "bottom"Mặc định: "end"Cạnh trượt vào.
DrawerSurface / OverlayDrawer.size"small" | "medium" | "large" | "full"Mặc định: "small"320 / 592 / 940px / toàn màn hình (rộng, hoặc cao khi bottom).
DrawerSurface.modalType"modal" | "alert"Mặc định: "modal"alert: không đóng khi bấm lớp phủ / Esc.
DrawerSurface.material"glass" | "glass-clear"Mặc định: —Yugen Labs — bề mặt glass.
OverlayDrawer.open / onOpenChangeboolean / (open) => voidMặc định: —Điều khiển trạng thái (Drawer root cũng nhận các prop này).
InlineDrawer.open / position / sizeboolean / DrawerPosition / DrawerSizeMặc định: false / "start" / "small"Drawer trong bố cục, chuyển động độ rộng.
InlineDrawer.separatorbooleanMặc định: falseVạch ngăn stroke-2 với nội dung.
DrawerHeaderTitle.actionReactNodeMặc định: —Phần tử bên phải tiêu đề (thường là nút đóng).