تخطّي إلى المحتوى الرئيسي

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

عرض مُقسّم إلى صفحات عند كثرة البيانات، مع دعم الوضعين المُتحكم به وغير المُتحكم به، وتبديل عدد العناصر في كل صفحة، والانتقال السريع بين الصفحات.

الاستخدام الأساسي​

الاستخدام الأساسي
import { useState } from 'react'
import { LhPagination } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhPagination
      total={128}
      current={current}
      onChange={(page) => setCurrent(page)}
    />
  )
}

خصائص Pagination​

خاصيةالوصفالنوعالقيم المتاحةالافتراضي
totalالعدد الإجمالي للبيانات (مطلوب)number——
currentالصفحة الحالية (مُتحكم بها، تبدأ من 1)number——
defaultCurrentالقيمة الافتراضية للصفحة الحالية (غير مُتحكم بها)number—1
pageSizeعدد العناصر في كل صفحة (مُتحكم به)number——
defaultPageSizeالقيمة الافتراضية لعدد العناصر في كل صفحة (غير مُتحكم بها)number—10
pageSizesخيارات عدد العناصر في كل صفحةnumber[]—[10, 20, 30, 40]
siblingCountعدد أرقام الصفحات المعروضة على كل جانب من الصفحة الحاليةnumber—1
showTotalهل يُعرض العدد الإجماليboolean—false
showSizeChangerهل يُعرض مبدّل عدد العناصر في كل صفحةboolean—false
showJumperهل يُعرض حقل الانتقال السريعboolean—false
simpleالوضع المُختصرboolean—false
disabledهل يكون معطّلًاboolean—false
sxخصائص التخطيط السريعSxProps——

أحداث Pagination​

حدثالوصفتوقيع الاستدعاءمقابل Vue
onChangeيُطلق عند تغيّر الصفحة (تبديل الصفحة، أو الانتقال السريع، أو التقييد الناتج عن تغيّر عدد العناصر في كل صفحة)(current: number, pageSize: number) => void@change
onSizeChangeيُطلق عند تغيّر عدد العناصر في كل صفحة(pageSize: number) => void@size-change
مُتحكم به / غير مُتحكم به

تمرير current يجعله مُتحكمًا به (لا يحتفظ المكوّن بحالة داخلية، بل يقوده الخارج)؛ وتمرير defaultCurrent يذهب به إلى الحالة الداخلية غير المُتحكم بها. وpageSize بالمثل. وفي كلا الوضعين يُطلق onChange.

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

عندما يؤدي تغيير pageSize إلى نقص عدد الصفحات الإجمالي، وإذا كانت الصفحة الحالية خارج النطاق، يُقيّدها المكوّن تلقائيًا إلى الصفحة الأخيرة في effect ويُطلق onChange، دون الحاجة إلى معالجة احتياطية في جانب العمل.

تفاعل لوحة المفاتيح​

حقل الانتقال السريع: يُرسل Enter طلب الانتقال، ويُرسل أيضًا عند فقد التركيز؛ وتُحدَّد القيم غير الصالحة (خارج النطاق أو غير الرقمية) إلى النطاق الصالح.

إمكانية الوصول​

العنصر الجذر هو <nav aria-label>؛ وتُخرج الصفحة الحالية aria-current="page"، ويحمل كل زر رقم صفحة aria-label (قالب pagination.page من حزمة اللغة، مثل «الصفحة 3»).

ref​

forwardRef<HTMLElement> — العنصر الجذر <nav>.

الأنماط​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/pagination'