Ark UI Primitives@ark-ui/react/accordionTailwind CSS v4Zag.js Engine

Ark Accordion

Thành phần hiển thị danh sách các mục có thể thu gọn / mở rộng linh hoạt, xây dựng trên nền tảng State Machine Zag.js. Hỗ trợ animation chiều cao 100% bằng CSS Keyframes mượt mà, điều hướng bàn phím đầy đủ theo chuẩn WAI-ARIA và hỗ trợ cả Shorthand API lẫn Compound Components.

Chuẩn WAI-ARIA Accordion Pattern

4 Kích cỡ chuẩn (xs, sm, md, lg)

6 Kiểu dáng giao diện (Variants)

Single & Multiple Expansion

1. Phương thức sử dụng: Shorthand API vs Compound Components

Hai phong cách API

ArkAccordion hỗ trợ cả cú pháp 1 dòng tiện ích (truyền mảng items) lẫn cấu trúc Compound Components để tùy biến sâu.

Cách 1: Shorthand APINhanh & Tiện ích

Truyền mảng items trực tiếp. Mỗi item hỗ trợ title, description, icon, badge và content.

ChillCMS tích hợp kiến trúc Server-Side Rendering thông qua React Router v7, phân tách bundle thông minh và asset caching đa tầng với Redis và CDN Cloudflare.

Code mẫu Shorthand

<ArkAccordion
  variant="card"
  defaultValue={['item-1']}
  items={items}
/>

Cách 2: Compound ComponentsTùy biến tối đa

Dùng ArkAccordion.Root, .Item, .ItemTrigger, .ItemContent để làm chủ layout 100%.

Sử dụng Prisma 7 adapter-pg với connection pool chuẩn Enterprise, kết hợp migration bất biến tự động version hóa.

Code mẫu Compound

<ArkAccordion.Root variant="separated">
  <ArkAccordion.Item value="1">
    <ArkAccordion.Trigger icon={<Icon />}>
      Tiêu đề
    </ArkAccordion.Trigger>
    <ArkAccordion.Content>
      Nội dung
    </ArkAccordion.Content>
  </ArkAccordion.Item>
</ArkAccordion.Root>

2. Ma trận kiểu dáng (Variants Matrix)

6 Variants

6 kiểu dáng giao diện phong phú, đáp ứng từ các trang FAQ, Card cài đặt đến danh sách tác vụ độc lập.

Separated: Mỗi mục là một chiếc thẻ độc lập, viền đổi màu highlight khi mở.

React Router v7 kết hợp loader/action chạy độc quyền trên server, đảm bảo không rò rỉ bí mật API key và giảm thiểu tối đa bundle size tải về máy khách.

3. Bốn kích thước tiêu chuẩn (Control Sizes)

xs | sm | md | lg

Đồng bộ chính xác với ControlSize của ChillCMS (Button, Input, Switch, Badge), đảm bảo căn chỉnh thẳng hàng hoàn hảo.

Khoảng cách padding, độ cao tối thiểu của dòng tiêu đề (min-height), kích thước chữ và biểu tượng chevron indicator đều tự động co giãn theo giá trị md.

4. Chế độ mở: Đơn lẻ (Single) vs Đồng thời (Multiple)

multiple & collapsible

Cấu hình cho phép chỉ mở một mục duy nhất (kiểu FAQ truyền thống) hoặc mở nhiều mục cùng lúc tùy nhu cầu trải nghiệm.

Mở nhiều mục cùng lúc (multiple: false)Cho phép đóng hết (collapsible: true)

Chế độ Single Accordion

Có, ChillCMS hỗ trợ kiến trúc phân tách dữ liệu đa người dùng hoặc đa tổ chức linh hoạt thông qua các bộ lọc query toàn cục và CASL Ability scopes.

5. Điều khiển trạng thái theo ý muốn (Controlled State)

Controlled API

Kiểm soát danh sách các mục mở/đóng hoàn toàn bằng React State thông qua prop value và onValueChange.

Active values:["tab-1"]

Các mã API secret key được mã hóa bằng thuật toán hashing chuẩn và chỉ hiển thị một lần duy nhất lúc tạo mới.

6. Các ca sử dụng thực tế (Real-World Use Cases)

Rich UI

Mô hình kết hợp linh hoạt giữa Accordion và các components khác như Switch, Form Fields, Timeline và Badges.

Bảng cài đặt hệ thống (Settings Accordion)

Gửi thông báo đơn hàng mới

Tự động báo ngay khi có giao dịch

Cảnh báo đăng nhập lạ

Bảo vệ tài khoản quản trị

Lịch trình đơn hàng (Order History)

Bưu kiện đang trên xe vận chuyển tới kho trung chuyển TP. Hồ Chí Minh. Dự kiến giao trong ngày mai.

7. Tùy biến chỉ báo đóng/mở (Custom Indicators)

Custom Slots

Có thể thay thế biểu tượng mũi tên Chevron mặc định bằng dấu Cộng/Trừ (+ / -), biểu tượng mũi tên ngang hoặc ẩn chỉ báo.

Chỉ báo Dấu Cộng / Trừ (+ / -)Anatomy

Sử dụng ArkAccordion.ItemContext để nhận biết trạng thái expanded và render icon tùy ý mà không cần rotate mặc định.

Chỉ báo Mũi tên ngang (Arrow Right)Rotate 90deg

Tận dụng data attribute group-data-[state=open] của trigger để tạo bất kỳ hiệu ứng chuyển đổi nào mong muốn.

Notifications