PageControl

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

Обзор

Стили PageControl задаются размерами точек, зависящими от размера компонента, и токенами фона элементов. PageControlProgress расширяет ту же модель точек анимацией ширины.

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

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

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

Переменные частей

Корень

Корень задаёт раскладку в строку, промежуток и touch-action: none.

Элемент

PageControlItem переводит размер в размеры круглой точки и задаёт активный фон.

Элемент прогресса

PageControlProgress расширяется в ширину в активном состоянии и анимирует заливку через псевдоэлемент ::after.

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

размер управляет диаметром точки
активное состояние меняет базовый фон
элементы прогресса используют --duration для управления анимацией заливки

Примеры

Крупный индикатор страниц

LTRRTL

large-page-control.tsx · 11 строк

import { PageControl, PageControlItem } from '@vega-ui/react';

export default function LargePageControl() {
  return (
    <PageControl size='lg' defaultActive={0} aria-label='Onboarding screens'>
      <PageControlItem index={0} aria-label='Welcome' />
      <PageControlItem index={1} aria-label='Connect your calendar' />
      <PageControlItem index={2} aria-label='Invite your team' />
    </PageControl>
  );
}

Чего не переопределять

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