Pagination

Playground

Đổi tổng số trang và trang hiện tại để xem cửa sổ số trang, dấu lược và trạng thái vô hiệu của Trước/Sau đổi theo.

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, getPaginationRange } from "@nexobox/ui";

const range = getPaginationRange(4, 12);

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious disabled={page <= 1} onClick={() => setPage(page - 1)} />
    </PaginationItem>
    {range.map((item) =>
      item === "ellipsis" ? (
        <PaginationEllipsis key={item} />
      ) : (
        <PaginationItem key={item}>
          <PaginationLink page={item} isActive={item === page} onClick={() => setPage(item)}>
            {item}
          </PaginationLink>
        </PaginationItem>
      ),
    )}
    <PaginationItem>
      <PaginationNext disabled={page >= totalPages} onClick={() => setPage(page + 1)} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Khi nào sử dụng

Nên dùng

Chuyển lát dữ liệu đang hiển thị trong cùng một khung nhìn: trang n trên tổng N trang của một danh sách. Component không import Table, chỉ nhận page và totalPages từ ngoài — một lưới thẻ cũng phân trang được như một bảng.

Khi nào không dùng

Tránh dùng

Tabs. Tabs đổi khung nhìn — bấm một tab thay cả bộ nội dung đang hiển thị. Pagination đổi lát dữ liệu của cùng một khung nhìn — bấm "Trang 2" vẫn là cùng một danh sách, chỉ khác đoạn nào của nó đang lộ ra.

Anatomy

Variants

Không có. Pagination không nhận prop variant — một hình thức trình bày duy nhất. Khác biệt giữa các mục đến từ state (mặc định / hiện tại / vô hiệu), không phải một tập variant để chọn.

States

Ba vị trí thật trong cùng một danh sách 10 trang — lùi vô hiệu ở trang đầu, cả hai khả dụng ở giữa, tiến vô hiệu ở trang cuối.

Bàn phím & trợ năng

API & triển khai

Design tokens

Đọc trực tiếp --nf-foundation-size-touch-target (sàn 44px, không điều kiện theo density — đây là bind một sàn, không phải một chiều cao, nên DS-017 clause 8 chủ ý để nguyên, khác với năm primitive khác từng bind bậc nền tảng), --nf-foundation-size-icon-small, --nf-component-focus-width/-color/-offset, --nf-semantic-action-selected-background/-foreground (trang hiện tại), --nf-semantic-action-disabled-background/-foreground (Trước/Sau vô hiệu). Năm alias --nf-component-pagination-gap, -item-padding-inline, -item-radius, -item-hover, -item-pressed có mặt trong component.tokens.json và đã sinh vào packages/ui/styles/nexoframe.tokens.css. --nf-foundation-motion-press-scale không còn được đọc — DS-018 rút nó khỏi mọi primitive; hover/pressed nay biểu đạt bằng màu, không bằng scale.

Do / Don't