Component / 007 / NEXOFRAME

Sheet

Mẫu chuẩn

Lớp chặn, panel neo vào một cạnh viewport. Bốn cạnh, hai hình học (flush / inset). Không có size.

Radix Dialog4 cạnh2 hình họcKhông size

Playground

Panel và màn che được portal, nên chúng theo theme của trang. Trigger theo brand đang chọn.

Brand

Mode

Cạnh

Hình học

Trạng thái

TSX

import { Button, Sheet, SheetContent, SheetTitle, SheetTrigger } from "@nexobox/ui";

<Sheet>
  <SheetTrigger asChild>
    <Button type="button">Chi tiết</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetTitle>Chi tiết đơn</SheetTitle>
  </SheetContent>
</Sheet>

Khi nào sử dụng

Nên dùng

Panel chặn, neo vào một cạnh: chi tiết của một hàng, một việc phụ dài hơn một popover, một form ngắn cần trọn chiều của cạnh nó bám vào.

Tránh dùng

Xác nhận giữa màn hình thì dùng Dialog. Ghi chú không chặn trang thì dùng Popover. Chọn một giá trị thì dùng Select. Không dùng làm drawer điều hướng.

Anatomy

SheetTitle là bắt buộc. Panel neo vào cạnh đang chọn, bo góc theo hình học. Màn che phủ trang. Một action footer là tuỳ chọn — không phải primitive riêng, mà là cách xếp SheetClose cùng Button ở cuối nội dung panel.

Variants

Hai trục độc lập: cạnh neo và hình học gặp cạnh đó. Mọi tổ hợp đều hợp lệ.

DƯỚI · FLUSH

Dính sát cạnh, bo góc phía trong.

DƯỚI · INSET

Cách đều bốn cạnh một gutter, bo cả bốn góc.

TRÊN · FLUSH

Dính sát cạnh, bo góc phía trong.

TRÊN · INSET

Cách đều bốn cạnh một gutter, bo cả bốn góc.

PHẢI · FLUSH

Dính sát cạnh, bo góc phía trong.

PHẢI · INSET

Cách đều bốn cạnh một gutter, bo cả bốn góc.

TRÁI · FLUSH

Dính sát cạnh, bo góc phía trong.

TRÁI · INSET

Cách đều bốn cạnh một gutter, bo cả bốn góc.

States

CLOSED

Chỉ còn trigger. Bấm để mở sheet thật.

FOCUS

Vòng focus của Button.

DISABLED

Disabled đặt trên Button. Không mở.

Bấm nút Chi tiết để mở. Không có empty, loading, hay invalid. Không có size.

Design tokens

Bo góc đọc --nf-component-panel-radius. Gutter của inset đọc --nf-foundation-space-8. Cả bốn cạnh fade và trượt --nf-component-sheet-viewport-margin (32px) theo trục của cạnh đó, qua --nf-motion-sheet-in / --nf-motion-sheet-out. 32px là bốn bước của quãng 8px mà menu và popover dùng. Màn che là color-mix 32% của --nf-semantic-text-primary.

API & triển khai

Prop	Mặc định	Quy ước
SheetTitle	—	Bắt buộc. Đặt tên cho sheet.
SheetDescription	—	Tuỳ chọn.
SheetClose	—	Nút thật. Escape và bấm màn che cũng đóng.
side	bottom	Cạnh neo: bottom, right, top, left.
variant	flush	Hình học gặp cạnh: flush (dính sát) hoặc inset (cách đều gutter).

Accessibility & nội dung

Enter hoặc Space trên trigger để mở. Tiêu điểm vào panel.

Tab đi vòng trong panel.

Escape đóng và trả tiêu điểm về trigger.

Focus, Escape và bẫy tiêu điểm hoạt động giống nhau trên mọi cạnh và mọi hình học.