PaginationSlider

Компактный индикатор страницы в виде ряда точек/полосок. Подходит для 3–8 однотипных элементов: шаги onboarding, карусели изображений, переключение табличных представлений.

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

• Onboarding / wizard с 3–5 шагами.
• Карусель изображений.
• Навигация между карточками одного уровня.

Когда не подходит: если страниц больше 8 или пользователь должен прыгать на конкретную страницу — используйте Pagination.

Анатомия

Size

xs — компактные карусели и плотные onboarding-шаги; s — дефолт для карточек и больших слайдеров.

Установка

pnpm add @cloud-ru/ds-pagination

import { PaginationSlider } from '@cloud-ru/ds-pagination'

Примеры использования

Базовый сценарий

import { PaginationSlider } from '@cloud-ru/ds-pagination';
import { useState } from 'react';

export function SliderBasic() {
  const [page, setPage] = useState(2);
  return <PaginationSlider total={5} page={page} onChange={setPage} />;
}

Размер s

import { PaginationSlider } from '@cloud-ru/ds-pagination';
import { useState } from 'react';

export function SliderSizeS() {
  const [page, setPage] = useState(2);

  return <PaginationSlider total={5} page={page} size='s' onChange={setPage} />;
}

Props

Types

PaginationSliderProps

Unions

PaginationSliderSize

Storybook

Figma