Для панели разделов возьмите готовые CdsTabs, для выбора тегов — CdsTagGroup, а чтобы листать слайды по одному — CdsSlideView.

Анатомия

По краям контейнера — кнопки-стрелки, между ними прокручивается лента элементов. Стрелки появляются, только когда лента не помещается в контейнер, и листают её на ширину видимой области.

Storybook

Вариации

Прокрутка и стрелки

По умолчанию стрелки появляются на десктопе, когда элементы не помещаются в контейнер; на мобильных лента прокручивается пальцем без стрелок. Проп show-arrows меняет это поведение: true показывает стрелки при переполнении и на мобильных, desktop и mobile — всегда на соответствующих устройствах, always — всегда, never — никогда.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows>
      <CdsSlideGroupItem v-for="n in 15" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Выбор элементов

Оберните элементы в CdsSlideGroupItem — и группа начнёт вести выбор: v-model хранит значение выбранного элемента из его пропа value. Сам CdsSlideGroupItem ничего не рендерит — его слот получает isSelected и toggle, а как показать выбранное состояние, решаете вы. Проп mandatory не даёт снять последний выбор.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref(1);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" mandatory show-arrows>
      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Проп multiple разрешает выбрать несколько элементов — v-model становится массивом, а max ограничивает число выбранных.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref([1, 3]);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" multiple :max="3" show-arrows>
      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Активный элемент по центру

При изменении выбора лента сама докручивается до активного элемента — за это отвечает включённый по умолчанию scroll-to-active. Проп center-active дополнительно держит активный элемент по центру контейнера.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
import { ref } from 'vue';

const selected = ref(10);
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup v-model="selected" center-active mandatory show-arrows>
      <CdsSlideGroupItem v-for="n in 20" :key="n" v-slot="{ isSelected, toggle }" :value="n">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="`Элемент ${n}`"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Вертикальная группа

Проп direction="vertical" разворачивает ленту в колонку — высоту ограничьте через max-height на самой группе.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto flex justify-center">
    <CdsSlideGroup direction="vertical" show-arrows class="max-h-[220px]">
      <CdsSlideGroupItem v-for="n in 12" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

Слоты

Слот	Описание
default	Элементы ленты, обычно CdsSlideGroupItem
prev	Свой контент кнопки «назад» вместо стрелки
next	Свой контент кнопки «вперёд» вместо стрелки

Все слоты получают методы prev, next, select и isSelected. Клик по области стрелки группа обрабатывает сама, поэтому в prev / next достаточно положить только визуал. Иконки стандартных стрелок меняются без слотов — пропами prev-icon и next-icon.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsFunctionalButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows="always">
      <template #prev>
        <CdsFunctionalButton icon="arrow-left" aria-label="Назад" />
      </template>

      <CdsSlideGroupItem v-for="n in 15" :key="n">
        <CdsButton variant="soft" color="neutral" class="m-1" :text="`Элемент ${n}`" />
      </CdsSlideGroupItem>

      <template #next>
        <CdsFunctionalButton icon="arrow-right" aria-label="Вперёд" />
      </template>
    </CdsSlideGroup>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Запись на встречу

Две слайд-группы с выбором: лента дней с center-active держит выбранную дату по центру, лента времени компактнее — с кнопками size="sm". Оба списка с mandatory: у записи всегда есть выбранные дата и время.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
import { computed, ref } from 'vue';

const days = [
  { value: '04.08', label: 'Пн, 4 авг' },
  { value: '05.08', label: 'Вт, 5 авг' },
  { value: '06.08', label: 'Ср, 6 авг' },
  { value: '07.08', label: 'Чт, 7 авг' },
  { value: '08.08', label: 'Пт, 8 авг' },
  { value: '11.08', label: 'Пн, 11 авг' },
  { value: '12.08', label: 'Вт, 12 авг' },
  { value: '13.08', label: 'Ср, 13 авг' }
];
const times = ['09:00', '10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:00'];

const day = ref('06.08');
const time = ref('11:00');

const dayLabel = computed(() => days.find((item) => item.value === day.value)?.label);
</script>

<template>
  <div class="m-auto flex w-full max-w-[440px] flex-col gap-2">
    <CdsSlideGroup v-model="day" center-active mandatory show-arrows>
      <CdsSlideGroupItem v-for="item in days" :key="item.value" v-slot="{ isSelected, toggle }" :value="item.value">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          class="m-1"
          :text="item.label"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>

    <CdsSlideGroup v-model="time" mandatory show-arrows>
      <CdsSlideGroupItem v-for="item in times" :key="item" v-slot="{ isSelected, toggle }" :value="item">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          color="brand"
          size="sm"
          class="m-1"
          :text="item"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>

    <p class="m-0 text-center text-200 text-content-secondary">Встреча: {{ dayLabel }} в {{ time }}</p>
  </div>
</template>

Лента документов

Слайд-группа работает и без выбора — как обычная прокручиваемая лента. Карточки кладутся прямо в слот default без CdsSlideGroupItem, стрелки листают ленту на ширину видимой области.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsSlideGroup } from '@central-design-system/components';

const documents = [
  { title: 'Договор поставки', date: '28.07.2026' },
  { title: 'Спецификация № 4', date: '25.07.2026' },
  { title: 'Акт сверки', date: '21.07.2026' },
  { title: 'Счёт № 1042', date: '18.07.2026' },
  { title: 'Протокол разногласий', date: '14.07.2026' },
  { title: 'Коммерческое предложение', date: '10.07.2026' }
];
</script>

<template>
  <div class="m-auto max-w-[520px]">
    <CdsSlideGroup show-arrows>
      <div
        v-for="document in documents"
        :key="document.title"
        class="m-1 flex w-[160px] flex-col gap-1 rounded-200 bg-surface-secondary p-3"
      >
        <CdsIcon icon="file" />
        <span class="text-200">{{ document.title }}</span>
        <span class="text-100 text-content-secondary">{{ document.date }}</span>
      </div>
    </CdsSlideGroup>
  </div>
</template>

Панель форматирования

Панель инструментов в узком контейнере: кнопки-иконки с aria-label, multiple разрешает включить несколько форматов сразу, а стрелки show-arrows="always" листают инструменты, которые не поместились.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
import { ref } from 'vue';

const formats = ref(['bold']);

const tools = [
  { value: 'bold', icon: 'bold', label: 'Жирный' },
  { value: 'italic', icon: 'italic', label: 'Курсив' },
  { value: 'underline', icon: 'underline', label: 'Подчёркнутый' },
  { value: 'highlight', icon: 'highlight', label: 'Маркер' },
  { value: 'list', icon: 'list-bullet', label: 'Список' },
  { value: 'link', icon: 'link', label: 'Ссылка' },
  { value: 'formula', icon: 'formula', label: 'Формула' },
  { value: 'insert', icon: 'paste', label: 'Вставка' }
];
</script>

<template>
  <div class="m-auto max-w-[280px]">
    <CdsSlideGroup v-model="formats" multiple show-arrows="always">
      <CdsSlideGroupItem v-for="tool in tools" :key="tool.value" v-slot="{ isSelected, toggle }" :value="tool.value">
        <CdsButton
          :variant="isSelected ? 'solid' : 'soft'"
          :color="isSelected ? 'brand' : 'neutral'"
          size="sm"
          class="m-1"
          :icon="tool.icon"
          :aria-label="tool.label"
          @click="toggle"
        />
      </CdsSlideGroupItem>
    </CdsSlideGroup>
  </div>
</template>

API

CdsSlideGroup

Пропсы

Имя	Тип	По умолчанию	Описание
centerActive	boolean | undefined	—	Принудительно выравнивает активный компонент по центру.
contentClass	any	—	Добавляет классы к контейнеру slide group
contentStyle	any	—	Добавляет inline-стили к контейнеру slide group
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
mobile	boolean | null | undefined	null	Определяет режим отображения компонента: Если значение равно true, компонент будет отображаться в режиме для Mobile. Если значение равно false, компонент будет отображаться в режиме для Desktop. Если значение равно null, режим будет зависеть от текущего Breakpoint.
mobileBreakpoint	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	—	Указывает точку преломления, при которой отображение будет переключаться в мобильный режим. Может быть числом (например, 600) или строкой, соответствующей одному из предопределенных Breakpoint (например, 'xs', 'sm', 'md', 'lg', 'xl').
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
nextIcon	IconValue | undefined	'chevron-right'	Иконка для кнопки "следующий".
prevIcon	IconValue | undefined	'chevron-left'	Иконка для кнопки "предыдущий".
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
scrollToActive	boolean | undefined	true	Если true, то при изменении активного компонента, контейнер будет прокручиваться так, чтобы он был виден.
selectedClass	string | undefined	'cds-slide-group-item--active'	CSS класс для выбранного состояния
showArrows	string | boolean | undefined	—	Изменяет настройки отображения стрелок: По умолчанию стрелки всегда отображаются на Desktop устройствах при переполнении контейнера.<br /> При переполнении контейнера на мобильных устройствах стрелки по умолчанию не отображаются.<br /> Значение «true» для параметра «show-arrows» позволяет отображать эти стрелки на мобильных устройствах при переполнении контейнера.<br /> Значение «desktop» всегда отображает стрелки на настольных устройствах, а значение «mobile» — на мобильных устройствах.<br /> Значение «always» всегда отображает стрелки как на настольных, так и на мобильных устройствах.<br /> Используйте значение «never», чтобы отключить отображение стрелок.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	SlideGroupSlot	Слот для компонента CdsSlideGroupItem
next	SlideGroupSlot	Слот для кнопки "следующий".
prev	SlideGroupSlot	Слот для кнопки "предыдущий".

Exposed

Имя	Тип	Описание
focus	(location?: "next" | "prev" | "first" | "last" | undefined) => void	Зафокусить компонента
hasNext	boolean	Возвращает значение true, если после текущего индекса есть элементы.
hasPrev	boolean	Возвращает значение true, если перед текущим индексом есть элементы.
scrollOffset	number	Получить скролл элемента
scrollTo	(location: "next" | "prev") => void	Проскроллить к элементу по индексу
selected	readonly string[]	Получить индекс выбранного элемента

CdsSlideGroupItem

Пропсы

Имя	Тип	По умолчанию	Описание
disabled	boolean | null | undefined	null	Заблокированное состояние
selectedClass	string | undefined	—	CSS класс для выбранного состояния
value	any	—	Значение компонента в группе

События

Имя	Тип	Описание
group:selected	[value: { value: boolean; }]	Событие, которое срабатывает при выборе элемента в группе.

Слоты

Имя	Тип	Описание
default	{ isSelected: boolean; select: (value: boolean) => void; toggle: () => void; selectedClass: false | (string | undefined)[]; }	Слот для контента