Для одиночного уведомления — например, подтверждения сохранения — достаточно CdsToast.

Вариации

Очередь сообщений

Сообщение — строка или объект с пропсами тоста. Добавляйте сообщения в массив v-model: очередь показывает их по одному, остальные ждут своего места. Свойство closable добавляет каждому тосту кнопку закрытия с текстом close-text. Общие пропсы тостов — location, timer, status и другие — задавайте прямо на очереди: они применятся к каждому сообщению. Пока вкладка браузера скрыта, автозакрытие приостанавливается.

Sandbox Storybook

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

const messages = ref<ToastMessage[]>([]);
let count = 0;

const push = () => {
  messages.value = [...messages.value, `Сообщение №${++count}`];
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Добавить сообщение" @click="push" />
    <CdsToastQueue v-model="messages" closable />
  </div>
</template>

Лимит и переполнение

Свойство total-visible ограничивает число одновременно видимых тостов: новый занимает место у края экрана и сдвигает предыдущие. Свойство display-strategy решает, что делать с лишними: hold (по умолчанию) держит их в очереди, пока не освободится место, overflow закрывает самые старые.

Sandbox Storybook

<script setup lang="ts">
import type { ToastMessage } from '@central-design-system/components';
import { CdsButton, CdsRadio, CdsRadioGroup, CdsToastQueue } from '@central-design-system/components';
import { ref } from 'vue';

const strategy = ref<'hold' | 'overflow'>('hold');
const messages = ref<ToastMessage[]>([]);
let count = 0;

const push = () => {
  messages.value = [...messages.value, { text: `Сообщение №${++count}`, timeout: 8000 }];
};
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsRadioGroup v-model="strategy" label="Стратегия переполнения" direction="horizontal" hide-details>
      <CdsRadio value="hold" label="hold — ждать места" />
      <CdsRadio value="overflow" label="overflow — вытеснять старые" />
    </CdsRadioGroup>

    <CdsButton text="Добавить сообщение" @click="push" />
    <CdsToastQueue v-model="messages" :total-visible="3" :display-strategy="strategy" closable />
  </div>
</template>

Стопка

Свойство collapsed сворачивает все тосты, кроме последнего, в компактную стопку. Наведите курсор — стопка развернётся, а таймеры встанут на паузу, пока курсор внутри.

Sandbox Storybook

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

const messages = ref<ToastMessage[]>([]);
let count = 0;

const push = () => {
  messages.value = [
    ...messages.value,
    {
      title: `Событие №${++count}`,
      text: 'Описание события в очереди',
      status: 'success'
    }
  ];
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Добавить в стопку" @click="push" />
    <CdsToastQueue v-model="messages" collapsed closable :total-visible="10" :timeout="6000" location="bottom right" />
  </div>
</template>

Слоты

Слоты настраивают каждый тост очереди; во все передаётся объект item текущего сообщения.

Слот	Описание
header	Шапка тоста
text	Текст тоста. Замещает text сообщения
actions	Действия тоста. В props приходит обработчик onClick, закрывающий тост
item	Полная замена тоста. Пропсы сообщения передаются через CdsDefaultsProvider

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

Фоновые операции

Передайте в сообщение promise — тост получит индикатор загрузки и не закроется, пока операция не завершится. Колбэки success и error возвращают пропсы тоста для результата: статус, текст и время автозакрытия.

Sandbox Storybook

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

const messages = ref<ToastMessage[]>([]);

const save = (shouldFail: boolean) => {
  const request = new Promise((resolve, reject) => {
    setTimeout(() => (shouldFail ? reject(new Error('Сервер не ответил')) : resolve(undefined)), 2000);
  });

  messages.value = [
    ...messages.value,
    {
      text: 'Сохраняем изменения…',
      promise: request,
      success: () => ({ status: 'success', text: 'Изменения сохранены', timeout: 4000 }),
      error: (err) => ({ status: 'danger', text: err?.message ?? 'Не удалось сохранить', timeout: 6000 })
    }
  ];
};
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsButton text="Успешное сохранение" @click="save(false)" />
    <CdsButton text="Сохранение с ошибкой" variant="soft" color="brand" @click="save(true)" />
    <CdsToastQueue v-model="messages" :total-visible="3" />
  </div>
</template>

Центр уведомлений

События приложения складываются в одну очередь в углу экрана: location="bottom right" уводит тосты из рабочей зоны, collapsed прячет старые в стопку, а closable даёт закрыть каждое уведомление.

Sandbox Storybook

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

const events: ToastMessage[] = [
  { title: 'Новый заказ', text: 'Заказ №1042 ожидает подтверждения', status: 'info' },
  { title: 'Оплата получена', text: 'Счёт №112 оплачен полностью', status: 'success' },
  { title: 'Заканчивается место', text: 'Хранилище заполнено на 90%', status: 'warning' },
  { title: 'Сбой синхронизации', text: 'Не удалось обновить данные. Повторим автоматически', status: 'danger' }
];

const messages = ref<ToastMessage[]>([]);
let next = 0;

const push = () => {
  messages.value = [...messages.value, events[next++ % events.length]];
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Новое событие" @click="push" />
    <CdsToastQueue v-model="messages" location="bottom right" collapsed closable :total-visible="5" :timeout="8000" />
  </div>
</template>

Управление очередью

Колбэк onDismiss сообщения получает причину закрытия — auto, dismissed, overflow или cleared, — а exposed-метод clear() закрывает все тосты и очищает очередь.

Sandbox Storybook

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

const queue = ref<InstanceType<typeof CdsToastQueue>>();
const messages = ref<ToastMessage[]>([]);
const log = ref<string[]>([]);
let count = 0;

const push = () => {
  const id = ++count;

  messages.value = [
    ...messages.value,
    {
      text: `Задача №${id} выполнена`,
      status: 'success',
      onDismiss: (reason) => {
        log.value = [`Тост №${id} закрыт: ${reason}`, ...log.value].slice(0, 4);
      }
    }
  ];
};
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <div class="flex gap-2">
      <CdsButton text="Добавить" @click="push" />
      <CdsButton text="Закрыть все" variant="soft" color="neutral" @click="queue?.clear()" />
    </div>

    <div class="h-[96px] text-center">
      <div v-for="line in log" :key="line">{{ line }}</div>
    </div>

    <CdsToastQueue ref="queue" v-model="messages" :total-visible="3" closable />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
absolute	boolean | undefined	—	Указывает, что элемент должен быть позиционирован абсолютно, а не фиксированно. Это может быть полезно для оверлеев, которые должны быть ограничены определенной областью, например, внутри контейнера с position: relative.
activator	(string & {}) | Element | "parent" | ComponentPublicInstance | undefined	—	Элемент, который будет активировать компонент
activatorProps	Record<string, any> | undefined	{}	Свойства для элемента активатора
attach	string | boolean | Element | undefined	—	Указывает, в какой элемент DOM следует переместить содержимое overlay. Может быть прямой ссылкой на элемент, строкой querySelector или значением true для отключения перемещения. По умолчанию используется элемент body. Как правило, не рекомендуется изменять это свойство, за исключением крайних случаев: алгоритм позиционирования по умолчанию должен справляться с большинством сценариев лучше, чем это возможно без перемещения, и может возникнуть непредвиденное поведение, если меню окажется дочерним элементом своего активатора.
bgColor	string | undefined	—	Цвет фона компонента
closable	string | boolean | undefined	—	Добавляет кнопку закрытия каждому тосту. Строковое значение задаёт цвет кнопки.
closeDelay	string | number | undefined	—	Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.
closeOnBack	boolean | undefined	false	Закрывает содержимое оверлея при нажатии кнопки «Назад» в браузере или вызове $router.back(), отменяя исходную навигацию. persistent оверлеи отменяют навигацию и анимируются так, как будто по ним щелкнули за пределами оверлея, вместо того чтобы закрываться.
closeOnContentClick	boolean | undefined	—	Скрыть компонент по клику на контент
closeText	string | undefined	'$cds.dismiss'	Текст кнопки закрытия.
collapsed	boolean | undefined	—	Сворачивает неактивные тосты в стопку под последним видимым.
contained	boolean | undefined	—	Ограничивает размер компонента и сетки в соответствии с его смещенным родительским элементом. Подразумевает использование свойств absolute и attach. (Примечание: родительский элемент должен иметь свойство position: relative.)
content	string | number | undefined	—	Контент, отображаемый в компоненте.
contentClass	any	—	Применяет пользовательский класс к отдельному элементу. Это удобно, поскольку содержимое перемещается в начало компонента cds-app (если не указан параметр attach) и не может быть выделено с помощью классов, переданных непосредственно в компонент.
contentProps	any	—	Применяет кастомные свойства (props) к перемещаемому контенту
disabled	boolean | null | undefined	null	Заблокированное состояние
displayStrategy	"overflow" | "hold" | undefined	'hold'	Стратегия при превышении totalVisible: hold — ждать закрытия, overflow — вытеснять самые старые.
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
gap	string | number | undefined	8	Отступ между тостами в пикселях.
height	string | number | undefined	—	Высота компонента
icon	false | IconValue | undefined	null	Иконка перед контентом. По умолчанию берётся из status; false скрывает иконку.
loading	boolean | undefined	—	Отображает индикатор загрузки вместо иконки.
location	Anchor | null | undefined	'top center'	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
locationStrategy	"static" | "connected" | LocationStrategyFunction | undefined	'static'	Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере. Используйте connected для привязки к элементу-активатору.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	readonly ToastMessage[] | undefined	[]	Очередь сообщений (v-model). Строка или объект с пропсами тоста.
opacity	string | number | undefined	—	Прозрачность элемента «scrim». Применяется только в том случае, если св-во scrim=true.
openDelay	string | number | undefined	—	Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover.
openOnClick	boolean | undefined	—	Показать компонент по клику на активатор
openOnFocus	boolean | undefined	—	Показать компонент по фокусу на активатор
openOnHover	boolean | undefined	—	Показать компонент по наведению на активатор
origin	Anchor | "auto" | "overlap" | undefined	'auto'	Устанавливает точку привязки для содержимого наложения, которая выравнивается по точке привязки «location» на объекте-цели. При значении «auto» используется противоположная сторона точки «location». При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель. Также задает значение CSS-свойства transform-origin для transitions enter/leave.
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS-позиционирование компонента — значение свойства position
prependAvatar	string | undefined	—	Источник изображения аватара перед контентом. Имеет приоритет над иконкой.
reverseTimer	boolean | undefined	—	Обратное направление шкалы таймера: заполняется, а не убывает.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Семантический статус — определяет цвет и дефолтную иконку.
target	(string & {}) | Element | "parent" | ComponentPublicInstance | "cursor" | [x: number, y: number] | undefined	—	Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей. По умолчанию в качестве такого элемента используется элемент-активатор.
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
timeout	string | number | undefined	5000	Время в миллисекундах до автоматического скрытия тоста. Значение -1 отключает автозакрытие.
timer	boolean | "top" | "bottom" | undefined	false	Отображает шкалу таймера до автозакрытия: true/top — сверху, bottom — снизу.
timerColor	string | undefined	—	Цвет шкалы таймера.
title	string | undefined	—	Заголовок тоста.
totalVisible	string | number | undefined	1	Максимальное количество одновременно видимых тостов.
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | null | undefined	'cds-toast-transition'	Анимация перехода
vertical	boolean | undefined	—	Вертикальная раскладка: действия переносятся под контент.
width	string | number | undefined	—	Ширина компонента
zIndex	string | number | undefined	2000	Значение z-index для компонента.

События

Имя	Тип	Описание
update:modelValue	[value: ToastMessage[]]	Событие изменения очереди сообщений.

Слоты

Имя	Тип	Описание
actions	{ item: ToastMessage; props: { onClick: () => void; }; }	Слот действий тоста.
header	{ item: ToastMessage; }	Слот шапки тоста.
item	{ item: ToastMessage; }	Слот полной замены тоста. Пропсы тоста передаются через CdsDefaultsProvider.
text	{ item: ToastMessage; }	Слот текста тоста.

Exposed

Имя	Тип	Описание
clear	() => void	Очищает очередь и закрывает все видимые тосты.