Pagination

Kontent sahifalari boʻylab harakatlaning.

1

2

3

4

5

···

10

<script setup lang="ts">
import { ref } from 'vue'
import { VxPagination } from 'veloxui'

const page = ref(1)
</script>

<template>
  <VxPagination v-model="page" :total="100" />
</template>

More Pages

Sahifalar koʻp boʻlsa, ellipsis tugmalari paydo boʻladi. Bir nechta sahifani oʻtkazib yuborish uchun ularni bosing.

1

2

3

4

5

···

50

<VxPagination v-model="page" :total="500" />

With Total & Jumper

Qaysi qismlar koʻrsatilishi va ularning tartibini boshqarish uchun layout propdan foydalaning.

Total 200

1

2

3

4

5

···

20

Go to

<VxPagination
  v-model="page"
  :total="200"
  :layout="['total', 'prev', 'pager', 'next', 'jumper']"
/>

Page Size Selector

Layout’ga sizes qoʻshing va har sahifadagi elementlar sonini boshqarish uchun v-model:pageSize dan foydalaning.

Total 500

10 / page

1

2

3

4

5

···

50

Go to

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(1)
const pageSize = ref(10)
</script>

<template>
  <VxPagination
    v-model="page"
    v-model:pageSize="pageSize"
    :total="500"
    :layout="['total', 'sizes', 'prev', 'pager', 'next', 'jumper']"
  />
</template>

Simple Mode

Prev/next tugmalari va sahifa indikatori bilan ixcham pagination.

1/50

<VxPagination v-model="page" :total="500" simple />

Simple with Page Size

10 / page

1/50

<VxPagination v-model="page" v-model:pageSize="pageSize" :total="500" simple :layout="['sizes']" />

Slider Mode

Sahifa tugmalarining sirgʻanuvchi oynasi. Next/prev bosilganda oyna birga sirgʻaladi.

1

2

3

<VxPagination v-model="page" :total="200" slider />

Slider with Visible Pages

Qancha sahifa tugmasi koʻrinishini visiblePages orqali boshqaring.

1

2

3

1

2

3

4

5

1

2

3

4

5

6

7

<VxPagination v-model="page" :total="200" slider :visible-pages="3" />
<VxPagination v-model="page" :total="200" slider :visible-pages="5" />
<VxPagination v-model="page" :total="200" slider :visible-pages="7" />

Custom Page Format

Sahifa raqamlari qanday koʻrsatilishini moslashtirish uchun pageFormat dan foydalaning. Ham standart, ham slider rejimlarida ishlaydi.

01

02

03

04

05

···

20

01

02

03

04

05

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(1)

function padPage(page: number) {
  return String(page).padStart(2, '0')
}
</script>

<template>
  <VxPagination v-model="page" :total="200" :page-format="padPage" />
  <VxPagination v-model="page" :total="200" slider :visible-pages="5" :page-format="padPage" />
</template>

Custom Prev/Next Buttons

Navigatsiya tugmalarini moslashtirish uchun #prev va #next slotlardan foydalaning.

1

2

3

4

5

···

20

<VxPagination v-model="page" :total="200">
  <template #prev>Prev</template>
  <template #next>Next</template>
</VxPagination>

Custom Page Slot

Har bir sahifa tugmasi kontenti ustidan toʻliq nazorat qilish uchun #page slotdan foydalaning.

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

···

[ 10 ]

<VxPagination v-model="page" :total="100">
  <template #page="{ page }">
    <span style="font-family: monospace;">[ {{ page }} ]</span>
  </template>
</VxPagination>

Sizes

1

···

3

4

5

6

7

···

20

1

···

3

4

5

6

7

···

20

1

···

3

4

5

6

7

···

20

<VxPagination v-model="page" :total="200" size="sm" />
<VxPagination v-model="page" :total="200" />
<VxPagination v-model="page" :total="200" size="lg" />

Disabled

1

2

3

4

5

···

10

<VxPagination v-model="page" :total="100" disabled />

Hide on Single Page

Faqat bitta sahifa boʻlsa, pagination avtomatik yashiriladi.

Yuqorida hech narsa yoʻq — faqat 1 ta sahifa

<VxPagination v-model="page" :total="5" hide-on-single-page />

Custom Pager Count

Qancha sahifa tugmasi koʻrinishini pagerCount orqali boshqaring (toq son boʻlishi kerak, 5 va 21 oraligʻida).

1

2

3

···

100

<VxPagination v-model="page" :total="1000" :pager-count="5" />

Full Example

Total 1000

10 / page

1

2

3

4

5

···

100

Go to

<VxPagination
  v-model="page"
  v-model:pageSize="pageSize"
  :total="1000"
  :layout="['total', 'sizes', 'prev', 'pager', 'next', 'jumper']"
  :page-sizes="[10, 20, 50, 100]"
/>

API

Props

Prop	Type	Default	Description
modelValue	number	1	Joriy sahifa raqami
total	number	0	Elementlar umumiy soni
pageSize	number	10	Har sahifadagi elementlar
pageSizes	number[]	[10, 20, 50, 100]	Sahifa oʻlchami tanlash variantlari
pagerCount	number	7	Maksimal koʻrinuvchi sahifa tugmalari (toq, 5-21)
layout	string[]	['prev', 'pager', 'next']	Layout qismlari: total, sizes, prev, pager, next, jumper
size	'sm' | 'default' | 'lg'	'default'	Komponent oʻlchami
disabled	boolean	false	Paginationni oʻchirish
hideOnSinglePage	boolean	false	Faqat bitta sahifa boʻlsa yashirish
simple	boolean	false	Oddiy rejim: sahifa indikatori bilan prev/next
slider	boolean	false	Slider rejimi: sahifalarning sirgʻanuvchi oynasi
visiblePages	number	3	Slider rejimida koʻrinuvchi sahifalar soni
pageFormat	(page: number) => string	—	Maxsus sahifa raqami formatlovchisi

Events

Event	Payload	Description
update:modelValue	number	Sahifa oʻzgardi
change	number	Sahifa oʻzgardi
update:pageSize	number	Sahifa oʻlchami oʻzgardi
size-change	number	Sahifa oʻlchami oʻzgardi

Slots

Slot	Props	Description
prev	—	Maxsus prev tugma kontenti
next	—	Maxsus next tugma kontenti
page	{ page: number }	Maxsus sahifa tugmasi kontenti