English
VietnameseRealtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
@ark-ui/react + Tailwind CSS v4
Ark Carousel
Bộ demo dùng trực tiếp compound API của Ark UI, gồm state controlled, autoplay, context, RootProvider, nhiều slide mỗi trang, kích thước biến đổi và hướng dọc.
Basic
Root, ItemGroup, Item, trigger và indicator theo cấu trúc cơ bản của Ark UI.
01
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Controlled
Route quản lý page và nhận CarouselPageChangeDetails từ onPageChange.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Autoplay
Tự động chuyển sau 2.5 giây, loop và AutoplayIndicator đổi giữa play/pause.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Pause on hover
Carousel.Context cung cấp API play/pause và trạng thái isPlaying.
Di chuột lên slide để tạm dừngĐang chạy
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
RootProvider
useCarousel khởi tạo state bên ngoài và truyền qua Carousel.RootProvider.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Scroll to
Dùng context API scrollToIndex và getProgress để điều khiển carousel.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Dynamic slides
Cập nhật slideCount khi thêm nội dung mới trong controlled carousel.
Dynamic 1
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Dynamic 2
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Dynamic 3
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Dynamic 4
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Slides per page
Hiển thị và di chuyển hai slide mỗi trang với khoảng cách 1rem.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Spacing và padding
Dùng slidesPerPage dạng số lẻ để hé lộ slide kế tiếp và tạo nhịp thị giác.
spacing="2rem"slidesPerPage=1.35
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Thumbnail indicators
Indicator hiển thị bản xem trước và nhận data-current từ Ark UI.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.
Variable size
autoSize kết hợp width riêng và snapAlign=center cho từng item.
Small
Medium size
XS
Large content
Regular
Vertical
orientation=vertical đổi trục scroll, trigger và keyboard navigation.
Realtime
Theo dõi dữ liệu tức thời
Tập trung tín hiệu vận hành vào một không gian trực quan và dễ kiểm soát.
Automation
Tự động hóa quy trình
Kết nối các bước lặp lại thành workflow nhất quán cho toàn bộ đội ngũ.
Commerce
Bán hàng đa kênh
Đồng bộ sản phẩm, khách hàng và đơn hàng trên cùng một nền tảng.
Content
Xuất bản linh hoạt
Tổ chức nội dung theo ngữ cảnh và phân phối đến đúng nhóm người dùng.
Insight
Biến số liệu thành quyết định
Đưa chỉ số quan trọng đến đúng người vào đúng thời điểm.
Platform
Một nền tảng thống nhất
Mở rộng tính năng mà vẫn giữ trải nghiệm quản trị gọn gàng và nhất quán.