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

Постраничное отображение при большом объёме данных; поддерживается контролируемый / неконтролируемый режим, переключение размера страницы и прямой переход к странице.

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

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

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

Props компонента 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'