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 />
}