کامپوننت‌ها
صفحه‌بندی
پیمایش بین صفحه‌های یک فهرست، با ارقام فارسی و «…» برای صفحه‌های زیاد.
import { Pagination } from "@kashi-ui/react";نمونه
const [page, setPage] = useState(4);
<Pagination page={page} total={12} onChange={setPage} summary="صفحهٔ ۴ از ۱۲" />
// با لینک (بهتر برای موتورهای جستجو)
<Pagination page={page} total={12} getHref={(p) => `?page=${p}`} />ویژگی‌ها
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
page / total | number | — | صفحهٔ فعلی و تعداد کل |
onChange | (page) => void | — | برای صفحه‌بندی با دکمه |
getHref | (page) => string | — | برای صفحه‌بندی با لینک |
siblings | number | 1 | تعداد صفحه‌های کنار صفحهٔ فعلی |
summary | ReactNode | — | متن خلاصه |
digits | "fa" | "latin" | "fa" | خط ارقام |
pageSize / pageSizes / onPageSizeChange | number / number[] / (size) => void | — / [10, 20, 50, 100] | فهرست «در هر صفحه» |
jumper | boolean | false | فیلد «برو به صفحه» (با onChange) |
تعداد در هر صفحه و پرش به صفحه
برای جدول‌های بلند: با onPageSizeChange فهرست «در هر صفحه» و با jumper فیلد «برو به صفحه» نمایش داده می‌شود. فیلد پرش ارقام فارسی و انگلیسی را می‌پذیرد.
<Pagination page={page} total={total} onChange={setPage}
pageSize={size} onPageSizeChange={setSize} pageSizes={[10, 20, 50, 100]}
jumper summary="۴۱ تا ۶۰ از ۴۸۷" />دسترس‌پذیری
- داخل
<nav aria-label="صفحه‌بندی">؛ صفحهٔ فعلیaria-current="page"و هر شماره نام کامل «صفحهٔ ۵» دارد. - «قبلی» در صفحهٔ اول و «بعدی» در صفحهٔ آخر غیرفعال‌اند. فوکوس کیبورد پس از تغییر صفحه حفظ می‌شود.