Pagination

Паттерны

Пагинация на ссылках

Когда использовать:

• страницы — настоящие места назначения для навигации

Заметки по композиции:

• используйте PaginationItem asChild
• генерируйте href в родительской функции

Компромиссы:

• сильная семантика навигации
• сложность маршрутизации остаётся вне компонента

import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import {
  Icon,
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationListItem,
  PaginationTriggerIconButton,
} from '@vega-ui/react';
import { useEffect, useState } from 'react';

type PageItem = number | 'start-ellipsis' | 'end-ellipsis';

Пагинация на кнопках

Когда использовать:

• состояние страницы полностью локальное или управляется на клиенте

Заметки по композиции:

• храните текущую страницу в состоянии родителя
• отключайте триггеры на границах

Компромиссы:

• простое локальное управление
• каноническим состоянием страницы всё равно должна владеть родительская функция

import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import {
  Icon,
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationListItem,
  PaginationTriggerIconButton,
} from '@vega-ui/react';
import { useState } from 'react';

type PageItem = number | 'start-ellipsis' | 'end-ellipsis';

Сокращённый большой диапазон

Когда использовать:

• страниц много и показывать каждую — слишком шумно

Заметки по композиции:

• оставляйте видимыми первую страницу, контекст текущей и последнюю
• используйте многоточие только как индикатор пропуска

Компромиссы:

• компактно и масштабируемо
• пользователь теряет прямой доступ к кнопке каждой страницы

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@vega-ui/icons';
import {
  Button,
  Icon,
  Pagination,
  PaginationEllipsis,
  PaginationItem,
  PaginationListItem,
  PaginationTriggerIconButton,
  Text,
} from '@vega-ui/react';
import { useState } from 'react';

Сравнение

Быстрое правило выбора

Используйте Pagination для явной постраничной навигации по дискретным наборам результатов. Используйте PageControl для коротких индикаторов карусели или шагов и рассмотрите другие паттерны, когда данным лучше подходят бесконечная прокрутка или фильтры.

Pagination или PageControl

• Используйте Pagination для страниц результатов.
• Используйте PageControl для коротких индикаторов шагов или карусели.

Pagination или бесконечная прокрутка

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

Выбирайте этот компонент, когда

• пользователь переходит по явным номерам или границам страниц
• маршруты или серверные запросы естественно соответствуют страницам

Не выбирайте этот компонент, когда

• взаимодействие — короткая карусель или пошаговый онбординг
• номера страниц не несут в продукте осмысленной ценности

Решение проблем

Интерфейс показывает текущую страницу, но данные ей не соответствуют

Симптом

Подсвеченная кнопка страницы и фактическое состояние данных расходятся.

Вероятная причина

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

Как проверить

• изучите логику маршрутизации или состояния запроса в родителе
• сравните данные активной страницы с отрендеренными элементами пагинации

Исправление

Сделайте родительскую функцию главной и рендерите пагинацию из её состояния.

Кнопки «назад» или «вперёд» работают на границах

Симптом

Пользователь может перейти на несуществующие страницы до первой или после последней.

Вероятная причина

Логика отключения на границах не подключена в родительской функции.

Как проверить

• проверьте первую и последнюю страницы

Исправление

Отключайте или не показывайте соответствующие триггеры на границах.

Многоточие выглядит кликабельным, хотя не должно

Симптом

Пользователь воспринимает многоточие как действие перехода на страницу.

Вероятная причина

Стили или композиция сделали PaginationEllipsis похожим на настоящий элемент страницы.

Как проверить

• сравните стили многоточия с элементами страниц

Исправление

Оставьте многоточие визуально пассивным, а интерактивные стили используйте только для настоящих элементов навигации.