Bắt đầu nhanh
Import Pagination (with i18n) 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ợ.
import { Pagination } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Pagination (with i18n) thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
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.
Pagination
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
pageBắt buộc | Trang hiện tại (bắt đầu từ 1). | number | Bắt buộc |
totalPagesBắt buộc | Tổng số trang. | number | Bắt buộc |
onChangeBắt buộc | Hàm thay đổi nhận trang mới. | (page: number) => void | Bắt buộc |
className | Class tuỳ chỉnh cho vỏ ngoài. | string | — |
size | Kích thước điều khiển (sm, md, lg). | "sm" | "md" | "lg" | "md" |
showFirstLast | Hiện nút Đầu/Cuối. | boolean | true |
showPrevNext | Hiện nút Trước/Sau. | boolean | true |
showPageNumbers | Hiện các nút số trang. | boolean | true |
showInfo | Hiện thông tin phụ. | boolean | false |
disabled | Vô hiệu hoá toàn bộ điều khiển. | boolean | false |
pageSize | Số mục mỗi trang hiện tại. | number | — |
pageSizeOptions | Danh sách tuỳ chọn số mục/trang. | number[] | — |
onPageSizeChange | Hàm thay đổi số mục mỗi trang. | (size: number) => void | — |
totalItems | Tổng số mục. | number | — |
labels | Ghi đè chuỗi i18n (chuỗi/hàm). | { navigationLabel?: string; firstPage?: string; previousPage?: string; nextPage?: string; lastPage?: string; pageNumber?: (page: number) => string; } | — |
CompactPagination
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
pageBắt buộc | Trang hiện tại (bắt đầu từ 1). | number | Bắt buộc |
totalPagesBắt buộc | Tổng số trang. | number | Bắt buộc |
onChangeBắt buộc | Hàm thay đổi nhận trang mới. | (page: number) => void | Bắt buộc |
className | Class tuỳ chỉnh cho vỏ ngoài. | string | — |
disabled | Vô hiệu hoá toàn bộ điều khiển. | boolean | false |
SimplePagination
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
pageBắt buộc | Trang hiện tại (bắt đầu từ 1). | number | Bắt buộc |
totalPagesBắt buộc | Tổng số trang. | number | Bắt buộc |
onChangeBắt buộc | Hàm thay đổi nhận trang mới. | (page: number) => void | Bắt buộc |
className | Class tuỳ chỉnh cho vỏ ngoài. | string | — |
size | Kích thước điều khiển (sm, md, lg). | "sm" | "md" | "lg" | "md" |
disabled | Vô hiệu hoá toàn bộ điều khiển. | boolean | false |
showInfo | Hiện thông tin phụ. | boolean | false |
totalItems | Tổng số mục. | number | — |
pageSize | Số mục mỗi trang hiện tại. | number | 10 |
Hướng dẫn sử dụng
Dùng Pagination (with i18n) để làm rõ vị trí hiện tại và các đích có thể đi tới. Giữ hành vi điều hướng của trình duyệt, thứ tự bàn phím và trạng thái hiện tại dễ nhận biết.
Trợ năng
Khi dùng Pagination (with i18n), 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ế.