Pagination
Pagination chia nội dung dài thành nhiều trang và cho phép chuyển nhanh giữa các trang.
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
// npm install yugen-uiimport { Pagination } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Controlled
siblingCount & ít trang
siblingCount={2} hiện thêm trang hai bên; khi ít trang, mọi trang đều hiển thị.
Small, chỉ icon
size="small" và showLabels={false} cho bảng dữ liệu gọn.
Cách dùng
- Đặt Pagination ngay dưới danh sách / bảng mà nó điều khiển.
- Giữ vị trí cố định để người dùng bấm liên tục không phải dời chuột.
- Không dùng cho luồng nội dung liên tục (feed) — cân nhắc tải thêm.
- Không hiển thị Pagination khi chỉ có một trang.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| page / defaultPagenumber | Mặc định: — / 1 | Trang hiện tại, bắt đầu từ 1. |
| pageCountnumber | Mặc định: — | Bắt buộc. Tổng số trang. |
| onPageChange(page: number) => void | Mặc định: — | Gọi khi chọn trang khác. |
| siblingCountnumber | Mặc định: 1 | Số trang hiển thị mỗi bên trang hiện tại. |
| size"small" | "medium" | Mặc định: "medium" | Nút 24 / 32px. |
| showLabelsboolean | Mặc định: true | Hiện chữ “Trước” / “Sau”. |
| disabledboolean | Mặc định: — | Vô hiệu hoá toàn bộ. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.pagination
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| labelstring aria-label mặc định của thẻ <nav>. | Mặc định (tiếng Anh)"Pagination" | messagesVi"Phân trang" |
| previousPagestring aria-label nút trang trước. | Mặc định (tiếng Anh)"Previous page" | messagesVi"Trang trước" |
| nextPagestring aria-label nút trang sau. | Mặc định (tiếng Anh)"Next page" | messagesVi"Trang sau" |
| previousstring Chữ hiện cạnh mũi tên trang trước ( | Mặc định (tiếng Anh)"Previous" | messagesVi"Trước" |
| nextstring Chữ hiện cạnh mũi tên trang sau ( | Mặc định (tiếng Anh)"Next" | messagesVi"Sau" |
| page(page: number) => string aria-label của nút số trang. | Mặc định (tiếng Anh)(page) => `Page ${page}` | messagesVi(page) => `Trang ${page}` |