ترقيم صفحات
Paginationترقيم صفحات متاح الوصول في React بزرَي السابق والتالي وروابط الصفحات وصفحة حالية بشريط سفلي وعلامات حذف ومساعد paginationRange لعرض ثابت.
علم الصفحة الحالية بـ isActive، واستخدم الدالة paginationRange ليحافظ شريط التنقل على عرض ثابت بين الصفحات.
متى تستخدمه
استخدم Pagination أسفل الجداول والقوائم التي تُقسَّم صفحات في الخادم، مثل أرشيف الطلبات. أبقِ المرقّم بالعرض نفسه عبر الصفحات بـ paginationRange حتى لا تتحرّك الأدوات تحت المؤشّر.
للموجزات اللانهائية، حمّل المزيد عند التمرير بدلًا منه. اعرض العدد الإجمالي قريبًا.
أمثلة
الخصائص
الخصائص التي يعرّفها 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.
لزرَي السابق والتالي أسماء متاحة، وتنعكس أيقوناتهما في الاتجاه العربي لتشير إلى الجهة الصحيحة.