@ark-ui/react/drawer + Tailwind CSS v4

Ark Drawer

Thành phần ngăn kéo trượt (Drawer / Bottom Sheet) cao cấp hoàn toàn tuân thủ WAI-ARIA Dialog Pattern, được vận hành bởi máy trạng thái Zag.js của Ark UI và hệ thống hiệu ứng CSS Keyframes chuyên biệt cho Zag Presence lifecycle. Hỗ trợ cảm ứng kéo vuốt mượt mà 60fps, bắt dính điểm dừng thông minh (Snap Points), 4 hướng mở linh hoạt (Left, Right, Bottom, Top), tương tác không chặn (Non-Modal), chống trượt cuộn danh sách (Scrollable), vùng cấm kéo (No Drag Area), xếp chồng nền co lún (Indent Background), và tích hợp đầy đủ nút icon đóng tiêu chuẩn.

1. Cơ bản & Bottom Sheet (Basic Usage)

Khởi tạo ngăn kéo cơ bản dạng Bottom Sheet theo cấu trúc chuẩn Ark UI với thanh Grabber, tiêu đề, mô tả và nút CloseTrigger icon X.

2. 4 Hướng mở linh hoạt (Swipe Direction)

Hỗ trợ mở ngăn kéo từ cả 4 hướng: Trái (start), Phải (end), Dưới (down) và Trên (up) với hướng vuốt đóng tự động thích ứng.

3. Đa mốc dừng vật lý (Snap Points)

Bắt dính các mốc chiều cao cố định hoặc tỉ lệ (25%, 50%, 100%) khi kéo vuốt với cơ chế động lực học Zag mượt mà.

4. Chế độ Modal & Non-Modal (modal={false})

Thiết lập modal={false} cho phép người dùng tự do bấm chuột và tương tác trực tiếp với các phần tử trên trang nền khi drawer đang mở.

5. Kiểm soát trạng thái mở (Controlled State)

Đồng bộ 2 chiều trạng thái đóng/mở với React state bên ngoài thông qua open và onOpenChange.

Trạng thái state: ĐÓNG (CLOSED)

6. Danh sách cuộn dài (Scrollable Drawer)

Drawer chứa danh sách dài 50 phần tử với cơ chế preventDragOnScroll thông minh, cho phép cuộn nội dung mượt mà và chỉ vuốt đóng khi ở đỉnh.

7. Vùng cấm kéo & Khóa vuốt (Drag Area Options)

Sử dụng data-no-drag để loại trừ vùng tương tác (slider, canvas, bản đồ) và draggable={false} để tắt hoàn toàn thao tác vuốt đóng.

8. Một Drawer dùng chung nhiều Trigger (Multiple Triggers)

Chia sẻ một Drawer duy nhất giữa nhiều nút Trigger khác nhau bằng thuộc tính value và sự kiện onTriggerValueChange.

9. Hiệu ứng thu nhỏ trang nền (Indent Background)

Sử dụng Drawer.Stack kết hợp Drawer.IndentBackground và Drawer.Indent để tạo hiệu ứng co lún trang nền đẳng cấp như iOS.

Khuôn viên thử nghiệm hiệu ứng thu nhỏ (Indent Sandbox)

Khi mở Drawer, lớp vỏ Indent này sẽ tự động co nhỏ lại (scale down) và bo góc mềm mại tạo cảm giác không gian 3 chiều như ứng dụng Apple iOS native.

10. Quản trị bằng useDrawer Hook (RootProvider)

Tách biệt instance máy trạng thái Zag ra ngoài bằng useDrawer() kết hợp ArkDrawer.RootProvider để điều khiển từ xa qua API.

Mở:false|Snap Point:50%

11. Kích cỡ & Biến thể giao diện (Sizes & Variants)

Lựa chọn kích cỡ từ sm đến full, kết hợp các biến thể bề mặt default, subtle, elevated và hiệu ứng kính mờ glass.

1. Chọn hướng mở (Side):

2. Chọn kích thước (Size):

3. Chọn kiểu giao diện (Variant):

12. Giỏ hàng thương mại điện tử thực tế (Shopping Cart)

Kịch bản giỏ hàng trượt từ bên phải với danh sách sản phẩm, tăng giảm số lượng, tính tổng và nút thanh toán dính đáy.

13. Bộ lọc danh mục & Giá nâng cao (Filter Drawer)

Ngăn kéo bộ lọc chuyên sâu dạng Left Drawer cho tìm kiếm danh mục, khoảng giá và các tuỳ chọn trạng thái.

14. Ngăn kéo xếp chồng lồng nhau (Nested Stack Drawers)

Mở ngăn kéo cấp 2 đè lên ngăn kéo cấp 1 với quản lý chuỗi tiêu điểm và phím Escape theo thứ tự LIFO tự động.

15. Vuốt từ mép màn hình (Edge Swipe Area)

Vùng đón nhận cảm ứng ở mép màn hình cho phép người dùng vuốt mở ngăn kéo như trải nghiệm ứng dụng native iOS/Android.