البناء · جديد

ترقيم الصفحات

يقسّم القوائم والجداول الطويلة إلى صفحات، ويبيّن الشريحة المعروضة في العروض المتتابعة.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/pagination

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

import { Pagination } from "@/components/ui/pagination";

<Pagination pageCount={20} page={page} onPageChange={setPage} />

‏hrefPattern يجعل كل صفحة رابطًا حقيقيًا (?page={page})، فتعمل صفحات الخادم دون شيفرة عميل.

السهمان وموقعك («صفحة 1 من 20»)، للمساحات الضيقة.

العدد وزر «تحميل المزيد» للخلاصات؛ الزر يعرض مؤشر التحميل ويتعطل في الصفحة الأخيرة.

‏PaginationDots: نقطة أو خط، بمقاسين، وعلى خلفية ضبابية فوق الصور. مع onCurrentChange تصبح كل نقطة زرًا.

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"numbers" \| "minimal" \| "load-more"`	`"numbers"`	خاصية Style في Figma (‏`style` محجوز في React).
`pageCount`	`number`		عدد الصفحات.
`page / defaultPage`	`number`	`1`	الصفحة الحالية، تبدأ من 1.
`onPageChange`	`(page: number) => void`		يُستدعى بالصفحة المختارة.
`hrefPattern`	`string`		صفحات كروابط، مثل `"/orders?page={page}"`.
`onLoadMore / loading`	`() => void / boolean`		لنمط تحميل المزيد.
`numerals`	`"latn" \| "arab"`		نظام الأرقام؛ الافتراضي من `KanzProvider`.

الخاصية	النوع	الافتراضي	الوصف
`count / current`	`number`		عدد الشرائح والشريحة الحالية (تبدأ من 0).
`onCurrentChange`	`(index: number) => void`		يجعل كل نقطة زرًا ينتقل إلى شريحتها.
`variant`	`"dot" \| "line"`	`"dot"`	خاصية Style.
`size`	`"md" \| "lg"`	`"md"`	خاصية Size.
`framed`	`boolean`	`false`	خاصية Framed: خلفية ضبابية للاستخدام فوق الصور.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	بين السهمين وأرقام الصفحات وزر الصفحات الأخرى.
`EnterSpace`	ينتقل إلى الصفحة أو يفتح قائمة الصفحات المخفية.

عنصر nav باسم «ترقيم الصفحات» بلغة الصفحة، والصفحة الحالية aria-current="page".
السهمان باسم «الصفحة السابقة» و«الصفحة التالية»، ويتعطلان عند الطرفين.
النقاط الزخرفية يصحبها نص مخفي «الشريحة 1 من 3»؛ النقاط الأزرار باسم «انتقل إلى الشريحة 2».