ترقيم الصفحات
ترقيم الصفحات for navigating between pages. Supports Numeric and Text types, configurable placement, mobile layout, and RTL.
Loading demo: pagination-real-world
التثبيت
npx sdaia-ui@latest add pagination
الاستخدام
import { Pagination } from "@/components/ui/pagination"<Pagination type="numeric" placement="center" />الأمثلة
رقمي
ترقيم الصفحات with numbered page buttons.
Loading demo: pagination-numeric
نص
ترقيم الصفحات with previous and next text labels instead of numbers.
Loading demo: pagination-text
الموضع
ترقيم الصفحات aligned to the start, center, or end of its container.
Loading demo: pagination-placement
الجوال
pagination layout optimised مدمج لـ mobile screens.
Loading demo: pagination-mobile
مرجع الواجهة البرمجية
PaginationProps
خصائص مكوّن Pagination.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'numeric' | 'text' | 'button' | "numeric" | optional |
placement | 'start' | 'center' | 'end' | "start" | optional |
mobile | boolean | false | optional |
rtl | boolean | false | optional |
page | number | mobile ? 2 : 3 | optional |
totalPages | number | mobile ? 8 : 12 | optional |
onPageChange | (page: number) => void | - | optional |
fullWidth | boolean | false | optional |