English
Vietnamese@ark-ui/react/clipboardTailwind CSS v4
Ark Clipboard
Thành phần hỗ trợ thao tác sao chép văn bản, đường dẫn và dữ liệu vào bộ nhớ tạm. Tích hợp máy trạng thái Ark UI, kiểm soát thời gian chờ (timeout), đồng bộ dữ liệu hai chiều và tương thích hoàn toàn với giao diện ChillCMS.
Cơ bản (Basic)
Sử dụng defaultValue, tự động sao chép văn bản khi nhấn vào nút Trigger.
Kiểm soát trạng thái (Controlled)
Quản lý value từ bên ngoài qua React state và sự kiện onValueChange.
Trạng thái sao chép (Copy Status)
Lắng nghe sự kiện onStatusChange để kích hoạt đếm số lượt sao chép thành công.
Thời gian chờ tùy chỉnh (Timeout)
Trạng thái đã sao chép được giữ trong 5 giây trước khi tự động chuyển về ban đầu.
Cú pháp rút gọn (Shorthand API)
Khai báo tiện lợi chỉ với một thẻ component mà không cần ghép thủ công từng phần tử.
Chỉ cần khai báo một thẻ <ArkClipboard /> duy nhất mà không cần lồng ghép thủ công các phần tử con.
Kích hoạt sao chép từ khối lệnh (Terminal Snippet)
Sử dụng ValueText làm nhãn hiển thị bên trong Trigger để biến toàn bộ khối thành nút chép.
Quản lý qua RootProvider & Hook
Truy xuất dữ liệu và kích hoạt lệnh sao chép tự do bên ngoài cấu trúc component.
copied: false
Trạng thái Chỉ đọc & Vô hiệu hóa
Hỗ trợ đầy đủ các thuộc tính readOnly và disabled đồng bộ toàn bộ thành phần.
Kích thước & Biến thể giao diện
Tùy chọn kích cỡ sm/md/lg và 4 phong cách hiển thị: default, bordered, card, subtle.
Kích thước:
Biến thể:
Cấu trúc thành phần (Anatomy & Parts)
Các subcomponent chuẩn hóa theo giải phẫu của @ark-ui/react/clipboard:
| Thành phần | Phần tử DOM | Mô tả |
|---|---|---|
| ArkClipboard.Root | div | Khung bao ngoài cùng quản lý máy trạng thái, timeout và giá trị clipboard. |
| ArkClipboard.Label | label | Nhãn mô tả trường nội dung sao chép, tự động liên kết htmlFor với Input. |
| ArkClipboard.Control | div | Khung chứa nhóm ô nhập liệu (Input) và nút kích hoạt (Trigger). |
| ArkClipboard.Input | input | Ô nhập văn bản hiển thị giá trị hiện tại, hỗ trợ chỉnh sửa hoặc chỉ đọc. |
| ArkClipboard.Trigger | button | Nút bấm thực hiện hành vi ghi văn bản vào bộ nhớ tạm hệ thống. |
| ArkClipboard.Indicator | div | Chỉ báo hiển thị biểu tượng/nội dung tương ứng khi đang sao chép hoặc bình thường. |
| ArkClipboard.ValueText | span | Văn bản biểu diễn giá trị hiện hành của clipboard, tiện dụng khi tạo nút inline. |
| ArkClipboard.Context | - | Render prop function cung cấp trạng thái copied, value và hàm copy(). |
| ArkClipboard.RootProvider | div | Provider nhận trực tiếp kết quả từ hook useClipboard từ ngoài. |