Pagination

Pagination — составной компонент для постраничной навигации.

Обзор

Стилизация Pagination в основном делегирована вложенным примитивам Button, IconButton и Text. Слой, специфичный для пагинации, в основном управляет раскладкой списка и несколькими настройками формы элементов страниц.

Публичные CSS-переменные

В текущей реализации нет большого набора отдельных публичных переменных --pagination-*.

Компонент в основном опирается на:

Переменная	Значение	Влияет на
промежуток между элементамикорневой список		В этом состоянии изменений не видно
квадратные пропорцииэлементы страниц / многоточие		В этом состоянии изменений не видно
горизонтальные отступы текстатекст пагинации		В этом состоянии изменений не видно
основной тон текстатекст пагинации		В этом состоянии изменений не видно
второстепенный тон текстатекст пагинации		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Корень

Корень задаёт горизонтальную раскладку списка и промежутки.

`PaginationItem`

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

`PaginationEllipsis`

Использует стили кнопки, но убирает изменения фона, из-за которых элемент выглядел бы интерактивным.

`PaginationText`

Добавляет боковые отступы и цвет текста в зависимости от варианта.

Взаимодействие состояний и вариантов

размер и вариант в основном передаются из контекста пагинации в Button, IconButton и Text
состояние текущей страницы меняет оформление кнопки на fill
многоточие остаётся визуально пассивным

Примеры

Второстепенный текст пагинации

LTRRTL

secondary-pagination-text.tsx · 32 строки

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

export default function SecondaryPaginationText() {
  const total = 20;

Не переопределяйте

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