Component / 006 / NEXOFRAME

Dialog

Mẫu chuẩn

Lớp chặn, panel giữa màn hình. Phải đóng hoặc xong việc trước khi dùng lại trang.

Radix DialogKhông variantKhông sizeGiữa màn hình

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

Trạng thái

TSX

import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@nexobox/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button type="button">Xác nhận</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogTitle>Xác nhận gửi</DialogTitle>
  </DialogContent>
</Dialog>

Khi nào sử dụng

Nên dùng

Việc phải xong hoặc bị huỷ trước khi trang dùng lại được: xác nhận, form ngắn.

Tránh dùng

Ghi chú không chặn trang thì dùng Popover. Panel sát đáy thì dùng Sheet. Chọn một giá trị thì dùng Select. Không phải drawer cạnh.

Anatomy

DialogTitle là bắt buộc và là tên của dialog. DialogDescription là tuỳ chọn. Màn che phủ trang. Panel nằm ở tâm màn hình theo cả trục ngang lẫn trục dọc, và giữ nguyên vị trí đó ở mọi trạng thái. DialogClose là nút thật.

States

CLOSED

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

FOCUS

Vòng focus của Button.

DISABLED

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

Bấm nút Xác nhận để mở. Không có empty, loading, hay invalid. Không có size.

Design tokens

Panel rộng --nf-foundation-layout-dialog. Màn che là color-mix 32% của --nf-semantic-text-primary. Kit không có token scrim. Chuyển động --nf-motion-dialog-in / --nf-motion-dialog-out chỉ mờ dần và scale bằng --nf-component-overlay-scale, không dịch chuyển panel.

API & triển khai

Prop	Mặc định	Quy ước
DialogTitle	—	Bắt buộc. Đặt tên cho dialog.
DialogDescription	—	Tuỳ chọn.
DialogClose	—	Nút thật. Escape và bấm màn che cũng đóng.

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, nút đóng, hoặc bấm màn che sẽ đóng và trả tiêu điểm về trigger.

Không có size và không phải drawer.