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

تنقّل بين الصفحات: السابقة / أرقام الصفحات / التالية / العلامة الحذف / تبديل عدد العناصر / القفز إلى صفحة / الإجمالي. خوارزمية تقلّص نافذة أرقام الصفحات مطبّقة كدالة نقية في طبقة core، قابلة للاختبار بالاستنفاد.

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

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="120" />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="120" />
</template>

الإجمالي وتبديل عدد العناصر

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

القفز إلى صفحة

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

الوضع المختصر

vue

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

استخدام مح controlled

الصفحة الحالية: 2

vue

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

vue

<script>
export default {
  data() {
    return { page: 2, pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

عدد العناصر لكل صفحة والتعطيل

يتحكم v-model:page-size في عدد العناصر لكل صفحة بشكل موجَّه، ويخصص page-sizes خيارات العدد؛ وdisabled يعطّل الترقيم بالكامل.

عدد العناصر لكل صفحة: 20

vue

<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

vue

<script>
export default {
  data() {
    return { pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

Pagination API

Props

اسم الخاصية	الوصف	النوع	الافتراضي
total	إجمالي البيانات (مطلوب)	`number`	—
pageSize	عدد العناصر لكل صفحة	`number`	`10`
current	الصفحة الحالية (`v-model:current`)	`number`	—
pageSizes	خيارات عدد العناصر لكل صفحة	`number[]`	`() => [10, 20, 30, 40]`
showTotal	إظهار الإجمالي	`boolean`	`false`
showSizeChanger	إظهار تبديل عدد العناصر لكل صفحة	`boolean`	`false`
showJumper	إظهار إدخال القفز إلى صفحة	`boolean`	`false`
simple	وضع مدمج	`boolean`	`false`
disabled	تعطيل	`boolean`	`false`
sx	خصائص التخطيط السريع sx	`LhSxProps`	—

Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:current	تتغير الصفحة الحالية (v-model)	`(page: number)`
update:pageSize	يتغير عدد العناصر لكل صفحة (v-model:pageSize)	`(size: number)`
change	يتغير رقم الصفحة	`(page: number)`
size-change	يتغير عدد العناصر لكل صفحة	`(size: number)`

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

العنصر الجذري هو <nav aria-label="pagination">
زر الصفحة الحالية يضبط aria-current="page" تلقائيًا
لكل زر صفحة، ولزري السابقة والتالية، aria-label مستقل (من حزمة اللغة pagination.page / prev / next)، والرمزان الخالصان «‹» و«›» مخفيان عبر aria-hidden
إدخال القفز إلى صفحة يحمل <label> حقيقيًا (من حزمة اللغة pagination.goto)
مبدّل عدد العناصر هو <select> أصلي مع aria-label (من حزمة اللغة pagination.sizeChangerLabel)
علامة الحذف عنصر عرض خالص بـ aria-hidden، لا تعيق التنقل بلوحة المفاتيح

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/pagination/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhPaginationProps

export interface LhPaginationProps {
  /** إجمالي البيانات (مطلوب) */
  total: number
  /** عدد العناصر لكل صفحة */
  pageSize?: number
  /** الصفحة الحالية (v-model:current) */
  current?: number
  /** خيارات عدد العناصر لكل صفحة */
  pageSizes?: number[]
  /** إظهار الإجمالي */
  showTotal?: boolean
  /** إظهار تبديل عدد العناصر لكل صفحة */
  showSizeChanger?: boolean
  /** إظهار إدخال القفز إلى صفحة */
  showJumper?: boolean
  /** وضع مدمج */
  simple?: boolean
  /** تعطيل */
  disabled?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

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

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

الإجمالي وتبديل عدد العناصر ​

القفز إلى صفحة ​

الوضع المختصر ​

استخدام مح controlled ​

عدد العناصر لكل صفحة والتعطيل ​

Pagination API ​

Props ​

Events ​

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

تعريفات الأنواع ​