Sheet
Sheet là một overlay thích ứng: panel trượt từ cạnh trên màn hình rộng, bottom sheet kéo được trên điện thoại — cùng một API, cùng một nội dung.
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.
// npm install yugen-uiimport { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose,} 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.
Bottom sheet & snap point
mode="bottom" ép dạng bottom sheet (thử được bằng chuột trên desktop). snapPoints [0.45, 0.9]; nội dung chỉ cuộn ở nấc 90%.
Không modal
modal={false}: không lớp phủ, không bẫy focus — trang phía sau vẫn dùng được. Một nấc 30%, vuốt xuống để đóng.
Panel đầu dòng, bắt buộc chọn
side="start" size="medium" trên desktop; dismissible={false} chặn Esc, bấm lớp phủ và vuốt xuống — người dùng phải chọn một hành động.
Cách dùng
- Luôn có SheetTitle; thêm SheetDescription khi tiêu đề chưa đủ ngữ cảnh.
- Đặt hành động chính trong SheetFooter — trên điện thoại nó luôn nằm trong vùng ngón cái, kể cả ở nấc thấp.
- Chọn nấc thấp nhất đủ cho tác vụ phổ biến (xem nhanh), nấc cao cho xem chi tiết; tối đa 2–3 nấc.
- Không dùng Sheet cho xác nhận ngắn hay hành động phá huỷ — dùng Dialog modalType="alert".
- Không đặt vùng kéo ngang (slider, bản đồ) ở tiêu đề — tiêu đề và tay nắm là vùng kéo sheet.
- Không mở Sheet chồng lên Sheet; dismissible={false} chỉ khi thật sự bắt buộc chọn.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| open / defaultOpen / onOpenChangeboolean / boolean / (open) => void | Mặc định: — | Trạng thái mở (controlled hoặc uncontrolled). |
| mode"auto" | "side" | "bottom" | Mặc định: "auto" | auto: panel khi viewport ≥ breakpoint, bottom sheet khi nhỏ hơn. |
| breakpoint"lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | number | Mặc định: "3xl" | Chiều rộng viewport tối thiểu để hiện dạng panel, cùng token với AppShell: lg 32rem · xl 36rem · 2xl 42rem · 3xl 48rem · 4xl 56rem · 5xl 64rem. Số (px) đã lỗi thời (bỏ ở 1.0). |
| side"start" | "end" | Mặc định: "end" | Cạnh trượt vào ở dạng panel; tự đảo ở RTL. |
| size"small" | "medium" | "large" | Mặc định: "small" | Độ rộng panel: 320 / 592 / 940px. |
| snapPointsnumber[] | Mặc định: [0.5, 0.9] | Các nấc chiều cao bottom sheet (phần của chiều cao viewport, 0–1). |
| snapPoint / defaultSnapPoint / onSnapPointChangenumber / number / (snap) => void | Mặc định: — | Nấc hiện tại; mặc định nấc thấp nhất, mỗi lần mở (uncontrolled) bắt đầu lại từ defaultSnapPoint. |
| modalboolean | Mặc định: true | false: không lớp phủ, không bẫy focus / khoá cuộn, không tự đóng khi bấm ra ngoài. |
| dismissibleboolean | Mặc định: true | false: chặn Esc, bấm lớp phủ và vuốt xuống để đóng. |
| SheetContent | Mặc định: true / "Change height" | Tay nắm bottom sheet; là nút (Enter, ↑ / ↓) khi có từ 2 nấc. |
| SheetContent | Mặc định: — | Yugen Labs — bề mặt glass. Bottom sheet glass lồi vào trong mép màn hình, bo bốn góc và đặc dần ở nấc cao nhất. |
| SheetHeader | Mặc định: — | Phần tử cuối hàng tiêu đề, thường là nút đóng. |
| data-sheet-no-dragattribute | Mặc định: — | Gắn lên phần tử con để cú chạm ở đó không kéo sheet. |
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.sheet
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| handlestring Nhãn tay nắm đổi nấc chiều cao của bottom sheet (phần "(50%)" được thêm sau). | Mặc định (tiếng Anh)"Change height" | messagesVi"Đổi chiều cao" |