nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Pagination

نمای کلی
۱۹ اکسپورت۴ محور واریانت۳۴ پراپ۴ فایل
import { Pagination, PaginationAlign, PaginationEllipsis, PaginationLabels, PaginationSlot, PaginationType } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

count تعداد صفحه‌هاست و page از یک شروع می‌شود. با defaultPage بدون کنترل، یا با page به‌همراه onPageChange کنترل‌شده.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(3)

  return (
    <Pagination
      count={16}
      page={page}
      onPageChange={setPage}
      labels={{ root: "Pagination" }}
    />
  )
}

انواع

basic سلول‌های جداست؛ full-radius آن‌ها را قرصی می‌کند؛ group آن‌ها را در یک کنترل بخش‌بندی‌شدهٔ یکپارچه به‌هم می‌چسباند.

basic
full-radius
group
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} type="basic" />
      <Pagination count={16} defaultPage={3} type="full-radius" />
      <Pagination count={16} defaultPage={3} type="group" />
    </>
  )
}

پنجره

siblingCount یعنی چند صفحه دو طرف صفحهٔ فعلی بنشیند؛ boundaryCount یعنی چندتا در هر سر سنجاق بماند. showEdges پرش به اول و آخر را بیرون از فلش‌ها اضافه می‌کند.

siblingCount=1 (پیش‌فرض)
siblingCount=2 · boundaryCount=2
showEdges
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={40} defaultPage={20} siblingCount={1} />
      <Pagination count={40} defaultPage={20} siblingCount={2} boundaryCount={2} />
      <Pagination count={40} defaultPage={20} showEdges />
    </>
  )
}

تراز و حالت دستگاه

align جای ردیف را تعیین می‌کند. حالت دستگاه موبایل سلول‌ها را کنار می‌گذارد و به‌جایش دو فلش و خلاصهٔ «صفحهٔ ۳ از ۱۶» می‌آورد — مسیر شانزده‌صفحه‌ای روی موبایل جا نمی‌شود.

align=start
align=center
align=end
align=between
موبایل
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} align="start" />
      <Pagination count={16} defaultPage={3} align="between" />
      <Pagination count={16} defaultPage={3} deviceMode="mobile" />
    </>
  )
}

پیشرفته

advanced خلاصه را پیش از مسیر و کنترل تعداد ردیف در صفحه را پس از آن اضافه می‌کند. هر رشتهٔ دیده‌شدنی یک پراپ است — سیستم طراحی‌ای که متنش را خودش نگه دارد، پشتهٔ ترجمه‌اش را به هر مصرف‌کننده تحمیل می‌کند.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <Pagination
      advanced
      count={16}
      page={page}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 20, 50]}
      onPageSizeChange={setPageSize}
      labels={{
        root: "Pagination",
        summary: (page, count) => `Page ${page} of ${count}`,
        perPage: (size) => `${size} / page`,
      }}
    />
  )
}

غیرفعال

کل کنترل را خاکستری می‌کند — مثلاً جدولی که در حال بارگذاری دوباره است.

import { Pagination } from "@nili/ui"

export function Example() {
  return <Pagination count={16} defaultPage={3} disabled />
}