Thành phần giao diện Ark UI & Tailwind CSS v4

ArkTabs Component

Thành phần chuyển đổi thẻ tab chuẩn mực được xây dựng trên nền tảng @ark-ui/react/tabs và hệ thống thiết kế Tailwind CSS v4. Cung cấp 5 kiểu giao diện tinh tế, thanh trượt indicator mượt mà, hỗ trợ cả Compound Anatomy lẫn Shorthand API.

1. Cơ bản: Shorthand API với Dòng kẻ (Line Variant)

Shorthand API

Sử dụng tiện ích ArkTabs với mảng items={[...]}, tự động dựng triggers, animated indicator và tab content.

Hệ thống quản trị ChillCMS

Cung cấp nền tảng số hoá nội dung, quản lý bán hàng và tích hợp AI linh hoạt dựa trên React Router v7 và Tailwind CSS v4.

2. Bộ sưu tập 5 Biến thể Giao diện (Variants Showroom)

Khám phá và chuyển đổi trực tiếp giữa 5 kiểu dáng: line, subtle, pill, enclosed, outline.

Tuỳ chỉnh cấu hình ngôn ngữ, múi giờ và nhận diện thương hiệu với biến thể line.

3. Thanh trượt Animated Sliding Indicator

Smooth Motion

Zag.js tính toán toạ độ và kích thước động (--left, --top, --width, --height), tạo hiệu ứng capsule lướt mượt mà.

Biến thể Subtle (Segmented)

Bo góc rounded-xl

Thống kê lưu lượng truy cập 24 giờ qua: 1.420 lượt.

Biến thể Pill (Capsule)

Bo góc rounded-full

28 sản phẩm đang được hiển thị trực tiếp trên cửa hàng.

4. Tabs Hướng Dọc (Vertical Orientation)

Định hướng orientation='vertical' lý tưởng cho menu cài đặt, quản trị tài khoản hoặc thanh điều hướng chi tiết.

Hồ sơ Quản trị viên

Họ tên: Nguyễn Văn An • Email: admin@chillcms.dev

Dữ liệu hồ sơ minh họa.

5. Trạng thái Controlled & Sự kiện onValueChange

Quản lý giá trị tab bằng state từ bên ngoài, nhận sự kiện thay đổi chi tiết từ Zag.js.

Tab hiện tại:inbox

Nhật ký sự kiện gần nhất:inbox (mặc định)

Bạn có 12 thông báo chưa đọc trong hộp thư.

Nhấp vào từng thông báo để xử lý công việc.

6. Kích thước (sm, md, lg) & Chế độ Fitted (Full-width)

Điều chỉnh tỷ lệ hiển thị phù hợp mọi mật độ thông tin và tuỳ chọn kéo dãn đều các tab theo chiều ngang.

Kích thước:

Kéo dãn full chiều rộng (fitted = true)

Giao diện máy tính tối ưu với layout dạng lưới và độ phân giải cao.

7. Cú pháp Compound Anatomy (<ArkTabs.Root>, <ArkTabs.List>, ...)

Compound Pattern

Khi cần tuỳ biến bố cục phức tạp, chèn thêm nút thao tác, ô tìm kiếm hoặc nhúng form trực tiếp vào header của Tabs.

Đăng nhập bảo mật đa tầng

Mật khẩu hiện tại

8. RootProvider & đổi hướng

Cấu hình orientation trong useTabs. RootProvider nhận value là đối tượng trả về của hook. Fitted chỉ chia đều chiều rộng khi tabs nằm ngang.

Thông tin tài khoản minh họa.

9. Bàn phím, disabled & vòng đời nội dung

Với activationMode="manual", dùng ←/→, Home/End để chuyển focus, Enter hoặc Space để chọn. Tab bị vô hiệu hóa được bỏ qua. Nội dung chỉ được tạo khi mở lần đầu (lazyMount). Nhập ghi chú rồi chuyển tab để thử giữ hoặc xóa nội dung khi unmountOnExit bật.

Xóa nội dung khi rời tab (unmountOnExit)

Chuyển sang Ghi chú để thử vòng đời nội dung.

10. Không dùng indicator & nội dung bằng 0

showIndicator=false vẫn giữ kiểu hiển thị của tab đang chọn. Giá trị 0 và nội dung rỗng vẫn có panel tương ứng để liên kết trợ năng không bị thiếu.

11. Bảng thuộc tính API của ArkTabs

Danh sách các props chính để cấu hình thành phần ArkTabs.

Thuộc tính	Kiểu dữ liệu	Mặc định	Mô tả
variant	'line' \| 'subtle' \| 'pill' \| 'enclosed' \| 'outline'	'line'	Phong cách thiết kế trực quan của tab và thanh trượt.
size	'sm' \| 'md' \| 'lg'	'md'	Kích thước padding, font-size và icons của trigger.
orientation	'horizontal' \| 'vertical'	'horizontal'	Hướng dàn trang ngang hoặc dọc theo WAI-ARIA.
fitted	boolean	false	Chia đều chiều rộng các tab ngang; không kéo giãn danh sách tab dọc.
items	ArkTabItem[]	undefined	Danh sách item cho cú pháp Shorthand API (value, label, icon, badge, disabled, content).
showIndicator	boolean	true	Hiển thị indicator trong Shorthand API (trừ enclosed). Compound API tự thêm ArkTabs.Indicator.
listLabel	string	undefined	Tên trợ năng của danh sách tabs trong Shorthand API.
activationMode	'automatic' \| 'manual'	'automatic'	Chọn tab bằng phím mũi tên hoặc chờ Enter/Space trong chế độ manual.
lazyMount / unmountOnExit	boolean	false	Tạo nội dung khi mở lần đầu / gỡ nội dung khi rời tab.
value / defaultValue	string \| null	undefined	Giá trị tab đang chọn (Controlled hoặc Uncontrolled).
onValueChange	(details: TabsValueChangeDetails) => void	undefined	Callback được gọi khi người dùng chuyển đổi tab.

Notifications