English
Vietnamese@ark-ui/react/dialog + Tailwind CSS v4
Ark Dialog
Thành phần Dialog tuân thủ đầy đủ chuẩn trợ năng WAI-ARIA, tích hợp trực tiếp máy trạng thái của Ark UI kèm styling hiện đại của Tailwind CSS v4. Hỗ trợ compound pattern, controlled state, alert dialog, đa kích thước, ngăn cuộn và drawer trượt linh hoạt.
1. Cơ bản (Basic Compound API)
Cấu trúc compound chuẩn gồm Root, Trigger, Backdrop, Positioner, Content, Header, Title, Description, Body và Footer.
2. Hiệu ứng chuyển cảnh (Animation Matrix)
Đa dạng hiệu ứng mở/đóng: Scale & Spring, Slide Up, Slide Down, Zoom Out và Soft Fade.
3. Quản lý trạng thái (Controlled State)
Điều khiển đóng/mở qua state React bên ngoài và nhận sự kiện qua onOpenChange.
Trạng thái: Đang đóng
4. Hộp thoại cảnh báo (Alert Dialog)
Sử dụng role='alertdialog' cho thao tác nguy hiểm, tự động focus nút an toàn và vô hiệu hoá click outside.
5. Điều khiển ngoài (RootProvider & Hook)
Khởi tạo instance máy trạng thái bằng useArkDialog() và truyền vào ArkDialog.RootProvider.
dialog.open = false
Điều khiển qua RootProvider & useArkDialog
Tách biệt hoàn toàn máy trạng thái và giao diện hiển thị.
Hook useArkDialog() cung cấp toàn bộ instance máy trạng thái của Zag.js/Ark UI, cho phép bạn đọc hoặc thay đổi trạng thái từ bất kỳ vị trí nào trong component cha.
6. Đa kích thước (Sizes Matrix)
Hỗ trợ các kích thước chuẩn responsive từ xs, sm, md, lg, xl, 2xl đến full-screen.
7. Đa vị trí & Drawer (Placement Matrix)
Dễ dàng đổi vị trí xuất hiện: giữa màn hình, phía trên, phía dưới, hoặc dạng Drawer trượt cạnh phải/trái.
8. Cuộn bên trong (Inside Scroll)
Nội dung dài cuộn độc lập bên trong Body, giữ cố định Header và Footer hành động.
9. Cuộn toàn trang (Outside Scroll)
Cuộn cả Positioner khi hộp thoại có nội dung văn bản dài như trang tài liệu.
10. Tự động Focus (Initial Focus)
Sử dụng initialFocusEl để tự động trỏ con trỏ vào ô nhập liệu họ tên ngay khi mở dialog.
11. Nhiều Trigger dùng chung (Multiple Triggers)
Một dialog duy nhất phục vụ nhiều nút bấm khác nhau với dữ liệu thay đổi linh hoạt qua onTriggerValueChange.
12. Hộp thoại lồng nhau (Nested Dialogs)
Dialog cha kích hoạt dialog con xác nhận với z-index và quản lý lớp tự động, không xung đột backdrop.
Cấp 1
Hộp thoại Cha (Parent Dialog)
Hộp thoại này có thể kích hoạt tiếp một hộp thoại cấp 2 lồng bên trong.
Khi mở hộp thoại con, Ark UI sẽ tự động gắn thuộc tính data-has-nested lên hộp thoại cha để kích hoạt hiệu ứng zoom-out thu nhỏ tự nhiên (tương tự modal stack trên iOS/macOS).
Thao tác nâng cao
Mở hộp thoại con để cấu hình quyền chi tiết
Cấp 2
Hộp thoại Con (Nested Dialog)
Dialog con hiển thị đè lên trên dialog cha với hiệu ứng slide-up.
Khi bạn thao tác hoặc đóng dialog con này, dialog cha ở phía sau vẫn giữ nguyên vẹn form và trạng thái.
13. Shorthand & Lazy Mount (Tiện ích rút gọn)
Cú pháp gọn nhẹ <ArkDialog ... /> và chỉ mount node vào DOM khi mở để giải phóng bộ nhớ.