English
Vietnamese@ark-ui/react/toggle-group + Tailwind CSS v4
ArkToggleGroup
Thành phần nhóm nút bật/tắt (Toggle Group) xây dựng trên @ark-ui/react/toggle-group, hỗ trợ chọn đơn (single), chọn nhiều (multiple), WAI-ARIA accessible, liền khối (attached) hoặc tách rời (detached), nhiều kích thước và biến thể.
Đồng bộ kích thước với Input và Button (Input & Button Sync)
Trực quan hoá sự đồng nhất tuyệt đối về chiều cao và icon token ở cả 4 kích thước chuẩn: xs, sm, md, lg.
ArkToggleGroup sử dụng chung các CSS variables --control-height, --control-icon-size, --control-gap và --control-padding-x từ control-size.ts, đảm bảo đồng bộ chiều cao và tỷ lệ chuẩn xác với Input và Button khi đặt cạnh nhau trong thanh công cụ hoặc bộ lọc.
XS (24px / 1.5rem)Height: var(--spacing-control-height-xs)
SM (28px / 1.75rem)Height: var(--spacing-control-height-sm)
MD (34px / 2.125rem)Height: var(--spacing-control-height-md)
LG (40px / 2.5rem)Height: var(--spacing-control-height-lg)
Thanh công cụ soạn thảo (Toolbar)
Kết hợp chọn nhiều (multiple) cho định dạng chữ và chọn đơn (single) cho căn lề.
Xem trước định dạng thời gian thực:
ChillCMS xây dựng giao diện quản trị hiện đại, linh hoạt và tối ưu hiệu suất cùng Tailwind CSS v4 và Ark UI.
Kích thước điều khiển (Sizes)
Bốn kích thước chuẩn: xs, sm, md, lg tương thích với design tokens của ChillCMS.
Chọn cỡ:
Biến thể giao diện (Variants)
Hỗ trợ các biến thể phong phú: default, outline, subtle, ghost.
Hiển thị biến thể: default
Hướng hiển thị (Orientation)
Hỗ trợ hiển thị theo chiều ngang (horizontal) hoặc chiều dọc (vertical).
Ngang (Horizontal)
Dọc (Vertical)
Liền khối vs Tách rời (Attached / Detached)
Tùy chọn gom nhóm liền mạch với border-collapse hoặc tách rời các nút riêng biệt.
Liền khối (isAttached = true - Mặc định)Khung bao bọc liền mạch
Tách rời (isAttached = false)Các nút riêng biệt có khoảng cách
Có điều khiển (Controlled State)
Kiểm soát mảng giá trị được chọn thông qua state React và các nút điều khiển bên ngoài.
Kiểu chữ văn bản
Quản lý giá trị bằng state React và sự kiện onValueChange.
Đang kích hoạt: bold, italic
Cấu trúc ghép nối (Compound API)
Ghép nối linh hoạt với ArkToggleGroup.Root và ArkToggleGroup.Item cho nội dung tùy biến.
Tự do cấu trúc các phần tử con với ArkToggleGroup.Root và ArkToggleGroup.Item:
Trình cung cấp gốc (RootProvider)
Khởi tạo trạng thái bằng useToggleGroup ở bên ngoài và cung cấp vào component.
Giá trị hiện tại: grid
Trạng thái (States)
Hỗ trợ vô hiệu hóa toàn bộ nhóm hoặc từng nút riêng lẻ với style rõ ràng.
Toàn bộ nhóm bị vô hiệu hóa (Disabled Group)
Từng nút cụ thể bị vô hiệu hóa (Item Disabled)
Nút 'Nghiêng' không thể nhấp vào trong khi các nút khác hoạt động bình thường.
Tích hợp Biểu mẫu (Form)
Đồng bộ mượt mà với luồng submit form và validation.