ComponentBố cục
Bắt đầu nhanh
Import Carousel từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Carousel } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Carousel thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Carousel
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
childrenBắt buộc | Danh sách slide hiển thị trong carousel. | React.ReactNode | Bắt buộc |
autoScroll | Tự động chuyển slide. | boolean | true |
autoScrollInterval | Khoảng thời gian (ms) giữa mỗi lần chuyển. | number | 5000 |
animation | Hiệu ứng chuyển giữa các slide. | AnimationVariant | "slide" |
orientation | Hướng hiển thị ngang/dọc. | Orientation | "horizontal" |
showArrows | Hiển thị nút mũi tên điều hướng. | boolean | true |
showDots | Hiển thị chấm phân trang. | boolean | true |
showProgress | Hiển thị thanh tiến trình khi tự động chuyển. | boolean | false |
showThumbnails | Hiển thị thumbnail để điều hướng. | boolean | false |
loop | Lặp lại khi đến đầu/cuối. | boolean | true |
slidesToShow | Số slide hiển thị cùng lúc. | number | 1 |
slidesToScroll | Số slide di chuyển mỗi lần. | number | 1 |
className | Class tùy chỉnh cho phần tử gốc. | string | — |
containerClassName | Class cho vùng chứa slides. | string | — |
slideClassName | Class cho từng slide. | string | — |
onSlideChange | Callback khi chỉ số slide thay đổi. | (index: number) => void | — |
thumbnailRenderer | Renderer thumbnail tùy chỉnh (child, index) => node. | (child: React.ReactNode, index: number) => React.ReactNode | — |
ariaLabel | Nhãn truy cập cho vùng carousel. | string | "Carousel" |
effectPreset | Mã nguồn chưa cung cấp mô tả bổ sung. | CarouselEffectPreset | — |
effectOptions | Mã nguồn chưa cung cấp mô tả bổ sung. | CarouselEffectOptions | — |
Hướng dẫn sử dụng
Dùng Carousel để tạo phân cấp và nhịp điệu. Thay đổi responsive cần có chủ đích và không gây nhảy bố cục khi tải.
Trợ năng
Khi dùng Carousel, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.