Pagination

Навигация по страницам контента.

vue

<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>

Когда страниц много, появляются кнопки с многоточием. Нажимайте их, чтобы перейти на несколько страниц сразу.

vue

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

With Total & Jumper

Используйте свойство layout, чтобы управлять тем, какие части отображаются и в каком порядке.

vue

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

Page Size Selector

Добавьте sizes в layout и используйте v-model:pageSize для управления количеством элементов на странице.

vue

<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

Компактная пагинация с кнопками вперёд/назад и индикатором страницы.

vue

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

Simple with Page Size

vue

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

Slider Mode

Скользящее окно кнопок страниц. Нажимайте вперёд/назад, и окно сдвигается.

vue

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

Slider with Visible Pages

Управляйте количеством видимых кнопок страниц с помощью visiblePages.

vue

<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

Используйте pageFormat, чтобы настроить отображение номеров страниц. Работает как в обычном, так и в slider-режиме.

vue

<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

Используйте слоты #prev и #next, чтобы настроить кнопки навигации.

vue

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

Custom Page Slot

Используйте слот #page для полного контроля над содержимым каждой кнопки страницы.

vue

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

Sizes

vue

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

Disabled

vue

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

Hide on Single Page

Когда есть только одна страница, пагинация автоматически скрывается.

Выше ничего нет — только 1 страница

vue

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

Управляйте количеством видимых кнопок страниц с помощью pagerCount (должно быть нечётным, от 5 до 21).

vue

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

Full Example

vue

<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`	Номер текущей страницы
`total`	`number`	`0`	Общее количество элементов
`pageSize`	`number`	`10`	Элементов на странице
`pageSizes`	`number[]`	`[10, 20, 50, 100]`	Варианты для селектора размера страницы
`pagerCount`	`number`	`7`	Максимум видимых кнопок страниц (нечётное, 5–21)
`layout`	`string[]`	`['prev', 'pager', 'next']`	Части layout: `total`, `sizes`, `prev`, `pager`, `next`, `jumper`
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Размер компонента
`disabled`	`boolean`	`false`	Отключить пагинацию
`hideOnSinglePage`	`boolean`	`false`	Скрывать, когда только одна страница
`simple`	`boolean`	`false`	Простой режим: вперёд/назад с индикатором страницы
`slider`	`boolean`	`false`	Режим слайдера: скользящее окно страниц
`visiblePages`	`number`	`3`	Количество видимых страниц в режиме слайдера
`pageFormat`	`(page: number) => string`	—	Пользовательский форматтер номера страницы

Events

Event	Payload	Description
`update:modelValue`	`number`	Страница изменена
`change`	`number`	Страница изменена
`update:pageSize`	`number`	Размер страницы изменён
`size-change`	`number`	Размер страницы изменён

Slots

Slot	Props	Description
`prev`	—	Пользовательское содержимое кнопки «назад»
`next`	—	Пользовательское содержимое кнопки «вперёд»
`page`	`{ page: number }`	Пользовательское содержимое кнопки страницы

Pagination ​

More Pages ​

With Total & Jumper ​

Page Size Selector ​

Simple Mode ​

Simple with Page Size ​

Slider Mode ​

Slider with Visible Pages ​

Custom Page Format ​

Custom Prev/Next Buttons ​

Custom Page Slot ​

Sizes ​

Disabled ​

Hide on Single Page ​

Custom Pager Count ​

Full Example ​

API ​

Props ​

Events ​

Slots ​