English
VietnameseArk UI + Tailwind CSS v4
Ark Floating Panel
Thành phần floating panel dựa trên @ark-ui/react/floating-panel, hỗ trợ open controlled, kéo thả (drag), co giãn 8 hướng (resize), các trạng thái stage và RootProvider.
Basic
Trigger mở panel có header kéo được, body và tám resize trigger.
Ghi chú nhanh
Panel có thể kéo bằng header, resize từ tám cạnh/góc, thu nhỏ, phóng to và đóng bằng Escape.
Draft
Chuẩn bị brief cho landing page.
Review
Kiểm tra lại responsive và focus state.
Controlled open
Route quản lý open state và nhận FloatingPanelOpenChangeDetails.
open: false
Controlled open
`open` được quản lý bởi route. Trigger vẫn dùng compound API, còn nút ngoài có thể cập nhật state trực tiếp.
Centered defaultPosition
Không truyền defaultPosition, panel tự mở ở giữa viewport.
position: 300, 100
Position
300, 100
Size
460 x 320
defaultPosition tự căn giữa
Ví dụ này không truyền defaultPosition. ArkFloatingPanel tự tính vị trí center từ viewport và defaultSize.
Position
300, 100
Size
460 x 320
Controlled rect
Position và size là state scalar, cập nhật khi drag/resize.
Position
220, 160
Size
440 x 320
Controlled position + size
Kéo hoặc resize panel để cập nhật state bên ngoài. Giá trị trong card sẽ đổi theo từng thao tác.
Position
220, 160
Size
440 x 320
Stage
Minimized ẩn body, maximized chiếm viewport, default trả panel về rect thường.
stage: Default
Stage controls
Stage
Default
Self-contained Shortcut
Cú pháp tiện lợi với props trigger và title tích hợp sẵn.
Self-contained ArkFloatingPanel
Component hỗ trợ truyền trực tiếp `trigger` và `title` như một shortcut tiện lợi mà không cần viết thủ công toàn bộ cây subcomponents.
<ArkFloatingPanel title="..." trigger={...}>...</ArkFloatingPanel>
RootProvider
useFloatingPanel tạo API bên ngoài rồi truyền qua RootProvider.
Position
320, 180
Size
440 x 320
RootProvider + useFloatingPanel
Hook trả về API đầy đủ để dùng với RootProvider, phù hợp khi cần điều khiển panel từ toolbar hoặc layout ngoài.
Position
320, 180
Size
440 x 320
Interaction model
Các part giữ data-slot ổn định để style/test, còn control button không khởi động drag.
Escape đóng panelDrag qua headerResize từ 8 hướng