Постраничная навигация

Навигация по страницам: предыдущая страница / номера страниц / следующая страница / пропуски / переключение размера страницы / переход на страницу / общее количество. Алгоритм сворачивания окна номеров страниц реализован как чистая функция в core-слое и покрывается исчерпывающими unit-тестами.

Базовое использование

Базовое использование

• •••

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

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

<script>
export default {}
</script>

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

Общее количество и переключение размера страницы

Общее количество и переключение размера страницы

Всего: 480

• •••

Элементов на странице10 / стр.20 / стр.30 / стр.40 / стр.

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

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

<script>
export default {}
</script>

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

Переход на страницу

Переход на страницу

Всего: 480

• •••

Перейтистр.

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

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

<script>
export default {}
</script>

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

Компактный режим

Компактный режим

1 / 48Перейтистр.

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

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

<script>
export default {}
</script>

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

Контролируемое использование

Контролируемое использование

• •••

Текущая страница: 2

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

<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 отключает всю постраничную навигацию.

Размер страницы и отключение

• •••

Элементов на странице10 / стр.20 / стр.50 / стр.100 / стр.

Размер страницы: 20

• •••

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

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