صفحه‌بندی کنترل‌شده (Pagination Controlled)

کامپوننت صفحه‌بندی آماده با مدیریت state، ellipsis هوشمند و پشتیبانی RTL.

معرفی

کامپوننت PaginationControlled یک لایه بالاتر روی Pagination پایه است که منطق تولید شماره صفحات، ellipsis هوشمند، و کنترل دکمه‌های قبلی/بعدی را مدیریت می‌کند.

چه زمانی استفاده کنیم:

برای اکثر سناریوهای صفحه‌بندی — این کامپوننت پیشنهادی است
وقتی نیاز به مدیریت خودکار ellipsis و شماره صفحات دارید
برای جداول و لیست‌هایی که state صفحه‌بندی در React مدیریت می‌شود

چه زمانی استفاده نکنیم:

وقتی pagination باید URL-aware باشد — state را از query params بخوانید
برای infinite scroll — از useInfiniteQuery + LoadMore استفاده کنید

استفاده

import { PaginationControlled } from '@parto-system-design/ui'

export default function MyComponent() {
  const [page, setPage] = React.useState(1)

  return <PaginationControlled currentPage={page} totalPages={20} onPageChange={setPage} />
}

حالت‌ها و انواع

با دکمه‌های اول و آخر

<PaginationControlled currentPage={5} totalPages={20} onPageChange={setPage} showFirstLast />

بدون ellipsis

<PaginationControlled currentPage={3} totalPages={8} onPageChange={setPage} showEllipsis={false} />

Props

Prop

Type

راهنمای استفاده

بکنید

از siblingCount برای کنترل تعداد صفحات نمایش‌داده‌شده در هر طرف صفحه فعلی استفاده کنید - برای جداول با صفحات زیاد، showFirstLast را فعال کنید - locale را بر اساس زبان اپلیکیشن تنظیم کنید تا اعداد به درستی نمایش داده شوند

نکنید