English
Vietnamese@ark-ui/react + Tailwind CSS v4
Ark TreeView
Thành phần cây phân cấp (TreeView) cho ChillCMS, hỗ trợ cả Compound API (tuỳ biến sâu từng phần tử) và Declarative API (gọn gàng, tự động đệ quy). Tích hợp đầy đủ điều khiển bàn phím chuẩn WAI-ARIA, hộp kiểm tri-state, đổi tên trực tiếp, nạp dữ liệu bất đồng bộ và tìm kiếm lọc nhanh.
WAI-ARIA TreeTailwind v4 tokensTri-state CheckboxInline Rename (F2)Async Lazy LoadFilterableNavigation Links
Compound API (Cấu trúc cơ bản)
Sử dụng trực tiếp các subcomponents Root, Tree, Branch, BranchControl, Item để tự do tuỳ chỉnh markup và cấu trúc.
Cấu trúc thư mục (Compound API)
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Dùng các compound component: ArkTreeView.Root, Branch, BranchControl, BranchIndicator, BranchContent, BranchIndentGuide, Item.
Declarative API (Component cấp cao)
Sử dụng component <ArkTreeView collection={...} /> tự động dựng cây đệ quy, gắn icon và đường kẻ dẫn hướng.
Duyệt thư mục (Declarative API)
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Component
<ArkTreeView /> tự động duyệt cây đệ quy, gắn icon thư mục/tệp và đường dẫn hướng mà không cần viết lại mã lặp lại.Controlled Expansion & Selection
Kiểm soát trạng thái mở nhánh (expandedValue) và chọn node (selectedValue), hỗ trợ nút Mở/Thu gọn tất cả và chế độ chọn đơn/nhiều.
Chế độ chọn:
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Đang chọn:
app/routes/_index.tsx
Nhánh đang mở:1 / 5 nhánh (app)
Cây chọn nhiều có Checkbox (Tri-state)
Hỗ trợ checkbox đa cấp với tính năng tự động liên kết trạng thái cha-con (chọn hết, chọn một phần indeterminate).
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Các node đã đánh dấu (2):
app/components/ui/button.tsxpackage.json
Đổi tên node trực tiếp (Inline Rename)
Kích hoạt chế độ đổi tên trực tiếp bằng phím F2 hoặc sự kiện canRename / onRenameComplete với NodeRenameInput.
Chọn một node và nhấn phím F2 để kích hoạt đổi tên trực tiếp.
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Thêm và Xoá node động (Mutation)
Chỉnh sửa cấu trúc cây tại runtime với collection.replace và collection.remove thông qua các nút hành động khi hover.
Rê chuột lên từng dòng để thêm tệp mới hoặc xoá node.
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Tìm kiếm và Lọc cây thời gian thực
Lọc cây linh hoạt với collection.filter, tự động mở các nhánh khớp kết quả và hỗ trợ tìm kiếm tiếng Việt không dấu.
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md
Lazy Loading bất đồng bộ (Async)
Tải dữ liệu node con theo yêu cầu khi mở nhánh bằng loadChildren, tích hợp sẵn icon xoay tải dữ liệu.
remote_modules (nạp từ xa 800ms)
cloud_storage (nạp nhiều cấp từ xa)
local_config.json
Nhấn mở các thư mục để kích hoạt loadChildren tải node con bất đồng bộ với hiệu ứng xoay loading mượt mà.
Cây liên kết điều hướng (Links)
Biến các node lá thành đường dẫn nội bộ <Link> hoặc liên kết ra trang ngoài qua thuộc tính asChild.
Hướng dẫn phát triển
Tài nguyên ngoài
Dùng prop asChild để kết hợp các node lá với <Link> nội bộ hoặc thẻ <a> bên ngoài.
Tuỳ biến Kích thước & Viền
Hỗ trợ 3 kích thước chuẩn (sm, md, lg) và 3 kiểu hiển thị (plain cho sidebar, outline cho card, surface cho bề mặt bóng mờ).
Kích thước:
Kiểu viền:
Xem trước (Size: MD - Variant: outline)
app
components
ui
dialog.tsx
ark-tree-view.tsx
layout.tsx
routes
_index.tsx
admin.tsx
docs.tsx
root.tsx
entry.server.tsx
public
favicon.ico
logo.svg
package.json
tsconfig.json
README.md