ترقيم صفحات
Paginationترقيم صفحات متاح الوصول في React: زرا السابق والتالي، روابط الصفحات، صفحة حالية بشريط سفلي، علامات حذف، ودالة paginationRange المساعدة لعرض ثابت.
حدد الصفحة الحالية بـ isActive، واستخدم الدالة paginationRange ليحافظ شريط الترقيم على عرض ثابت بين الصفحات.
متى تستخدمه
استخدم Pagination أسفل الجداول والقوائم التي يقسمها الخادم إلى صفحات، مثل أرشيف الطلبات. أبق شريط الترقيم بالعرض نفسه عبر الصفحات باستخدام paginationRange، حتى لا تتحرك الأدوات تحت المؤشر.
في الموجزات اللانهائية، استخدم التحميل عند التمرير بدل Pagination. اعرض العدد الإجمالي في مكان قريب.
أمثلة
الخصائص
الخصائص التي يعرفها Pagination. سمات العنصر الأصلي تمر كما هي.
<Pagination>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" |
<PaginationLink>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
isActive | boolean | ||
asChild | boolean | Render as the consumer element (e.g., router Link) via Radix Slot. |
<PaginationNav>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | Render as the consumer element (e.g., router Link) via Radix Slot. | |
label | string | Accessible label for the icon-only button - also drives aria-label (the
arrow has no visible text). Pass a translated string for non-English UIs.
Ignored when asChild + consumer-provided children are used. |
<PaginationOverflow>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
pagesإلزامي | number[] | The collapsed page numbers to list in the jump-to-page menu. | |
current | number | Current page - marked with aria-current + a trailing check. | |
onSelectإلزامي | (page: number) => void | Called with the chosen page number. | |
label | string | Accessible label for the trigger. Defaults to "More pages". |
إمكانية الوصول
يعرض Pagination عنصر <nav> بـ aria-label وقائمة روابط. تحمل الصفحة الحالية aria-current="page"، ويحمل زرا السابق والتالي aria-disabled عند تعطيلهما.
لزري السابق والتالي أسماء متاحة، وتنعكس أيقوناتهما في الاتجاه من اليمين إلى اليسار لتشير إلى الجهة الصحيحة.