Компонент устарел: новый код на нём писать не нужно. Он продолжает работать во всей ветке 4.x и в dev-консоли выводит [CDS UPGRADE], а удалим его в 5.0. Ход процесса без навигации по шагам показывает CdsSteps — без пропа interactive шаги некликабельны, а шапка без items работает как трекер статуса (см. сценарий «Статус заявки»). Учтите, что вид отличается: у CdsStages это стрелочная лента, у CdsSteps — индикаторы с линией прогресса. Для переключения равнозначных разделов — CdsTabs.

Анатомия

Шкала — это ряд этапов: у каждого есть название, а стрелки-разделители между соседними этапами задают направление процесса. Цвет этапа кодирует состояние: нейтральный — этап впереди, акцентный — текущий, зелёный — пройден, красный — ошибка.

Storybook

Вариации

Этапы

Передайте в items массив объектов: название и значение этапа читаются по ключам item-title и item-value (по умолчанию — title и value). Пока current не задан, все этапы нейтральные — процесс ещё не начался.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" />
  </div>
</template>

Текущий этап

current принимает значение активного этапа: он подсвечивается акцентным цветом, а этапы слева от него отмечаются пройденными.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" :current="3" />
  </div>
</template>

Ошибка

Ошибка задаётся в данных этапа — props: { error: true } у элемента items. Этап краснеет, когда процесс до него дошёл: он текущий или уже пройден.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3, props: { error: true } },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" :current="3" />
  </div>
</template>

Завершение процесса

Проп finished отмечает пройденными все этапы сразу — значение current при этом не важно.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" finished />
  </div>
</template>

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

Storybook

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

Продвижение заказа

Значение current приходит из данных и меняется по мере обработки заказа. Когда пройден последний этап, включите finished — шкала целиком станет зелёной.

Sandbox Storybook

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

const stages = [
  { title: 'Оформлен', value: 'created' },
  { title: 'Комплектация', value: 'assembly' },
  { title: 'В пути', value: 'shipping' },
  { title: 'Получен', value: 'delivered' }
];

const index = ref(0);

const finished = computed(() => index.value >= stages.length);
const current = computed(() => (finished.value ? null : stages[index.value].value));
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsStages class="w-full" :items="stages" :current="current" :finished="finished" />

    <CdsButton v-if="!finished" text="Следующий этап" @click="index++" />
    <CdsButton v-else variant="soft" color="brand" text="Оформить новый заказ" @click="index = 0" />
  </div>
</template>

Отклонение на проверке

Статус объявления хранится одной строкой, а items, current и finished вычисляются из него. При отклонении этап «Проверка» получает props.error и краснеет — пользователь сразу видит, где процесс остановился.

Sandbox Storybook

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

type Status = 'review' | 'rejected' | 'published';

const status = ref<Status>('review');

const items = computed(() => [
  { title: 'Черновик', value: 'draft' },
  { title: 'Проверка', value: 'review', props: { error: status.value === 'rejected' } },
  { title: 'Публикация', value: 'published' }
]);

const current = computed(() => (status.value === 'rejected' ? 'review' : status.value));
const finished = computed(() => status.value === 'published');
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsStages class="w-full" :items="items" :current="current" :finished="finished" />

    <div class="flex gap-2">
      <template v-if="status === 'review'">
        <CdsButton text="Одобрить" @click="status = 'published'" />
        <CdsButton variant="soft" color="brand" text="Отклонить" @click="status = 'rejected'" />
      </template>

      <CdsButton v-else variant="soft" color="brand" text="Вернуть на проверку" @click="status = 'review'" />
    </div>
  </div>
</template>

Статусы в списке

Шкала компактна и не перехватывает клики, поэтому её удобно повторять в каждой строке списка или таблицы: ширину задаёт утилити-класс, а состояние строки — свои current, finished и ошибка.

Sandbox Storybook

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

interface Order {
  name: string;
  current?: number;
  error?: boolean;
  finished?: boolean;
}

const stages = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Договор', value: 3 }
];

const orders: Order[] = [
  { name: 'Поставка канцтоваров', current: 2 },
  { name: 'Обслуживание техники', current: 2, error: true },
  { name: 'Ремонт переговорной', finished: true }
];

const stagesFor = (order: Order) =>
  stages.map((stage) => (order.error && stage.value === order.current ? { ...stage, props: { error: true } } : stage));
</script>

<template>
  <div class="m-auto flex w-[560px] flex-col gap-3">
    <div v-for="order in orders" :key="order.name" class="flex items-center justify-between gap-3">
      <span class="text-200">{{ order.name }}</span>

      <CdsStages
        class="w-[300px] shrink-0"
        :items="stagesFor(order)"
        :current="order.current"
        :finished="order.finished"
      />
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
current	string | number | null | undefined	null	Текущий этап
finished	boolean | undefined	—	Завершены все этапы
itemChildren	SelectItemKey	'children'	Свойство объекта, содержащее дочерние элементы, либо функция для их получения
itemProps	SelectItemKey	'props'	Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
items	any[] | undefined	[]	Массив элементов для отображения
itemTitle	SelectItemKey	'title'	Свойство объекта, используемое как заголовок элемента, либо функция для его получения
itemType	SelectItemKey	'type'	Свойство объекта, определяющее тип элемента (item, divider, subheader), либо функция для его получения
itemValue	SelectItemKey	'value'	Свойство объекта, используемое как значение элемента, либо функция для его получения
returnObject	boolean | undefined	—	Возвращать в значении модели объект вместо массива
theme	string | undefined	—	Тема компонента
valueComparator	ValueComparator | undefined	—	Функция сравнения значений элементов для определения выбранного состояния

Exposed

Имя	Тип	Описание
isCurrent	(idx: number) => boolean	Проверяет, является ли этап с указанным индексом текущим.
isFinished	boolean	Пройдены ли все этапы.