Yugen UI

Dialog

Dialog là cửa sổ modal yêu cầu người dùng xác nhận hoặc cung cấp thông tin trước khi tiếp tục.

modalType="modal" đóng được bằng Esc / click nền; modalType="alert" bắt buộc người dùng chọn một hành động.

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 {  Dialog, DialogTrigger, DialogSurface, DialogTitle,  DialogDescription, DialogContent, DialogActions, DialogClose,} 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.

Alert dialog

Không có nút X, không đóng bằng Esc/click nền.

Cách dùng

Nên
  • Tiêu đề nêu rõ câu hỏi/hành động.
  • Nút chính dùng động từ cụ thể (“Xoá”, không phải “OK”).
  • Đặt nút chính bên phải nút Huỷ.
Không nên
  • Không mở Dialog chồng Dialog.
  • Không dùng Dialog cho thông báo không cần phản hồi — dùng MessageBar/Toast.

Props

Prop · KiểuMặc địnhMô tả
Dialog.open / onOpenChangeboolean / (open) => voidMặc định: —Điều khiển trạng thái.
DialogSurface.modalType"modal" | "alert"Mặc định: "modal"Cách đóng dialog.
DialogSurface.material"glass" | "glass-clear"Mặc định: —Yugen Labs — bề mặt glass.
DialogTitle.actionReactNode | nullMặc định: nút XTruyền null để ẩn nút đóng.
DialogActions—Mặc định: —Hàng nút căn phải ở cuố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.dialog

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

Nhãn nút X ở DialogTitle.

Mặc định (tiếng Anh)"Close"messagesVi"Đóng"