Компонент существует только для плавной миграции с CDS 3 и будет удалён. Для новых сценариев используйте CdsToast.

Вариации

Управление показом

Видимость контролируется через v-model или слот activator — элемент внутри слота открывает уведомление по клику. Текст задаётся пропом text.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsNotificationAlert text="Изменения сохранены">
      <template #activator="{ props }">
        <CdsButton text="Показать уведомление" v-bind="props" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

Статусы

Свойство status задаёт цвет контента и иконку: info, success, warning, danger, progress. Иконку можно заменить пропом icon или скрыть значением false.

Sandbox Storybook

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

const statuses = CdsNotificationAlert.constants.statuses;
</script>

<template>
  <div class="flex justify-center gap-2">
    <CdsButton v-for="status in statuses" :key="status" :color="'status-' + status + '-surface'" variant="solid">
      {{ status }}
      <CdsNotificationAlert activator="parent" :status="status" :text="'Уведомление со статусом ' + status" />
    </CdsButton>
  </div>
</template>

Позиции

Свойство location задаёт позицию на экране: сторона (top, bottom) и выравнивание (left, center, right).

Sandbox Storybook

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

const locations = ['top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'] as const;
</script>

<template>
  <div class="grid grid-cols-3 justify-items-center gap-2">
    <CdsButton v-for="location in locations" :key="location" variant="soft" color="neutral">
      {{ location }}
      <CdsNotificationAlert activator="parent" :location="location" :text="'Уведомление в позиции ' + location" />
    </CdsButton>
  </div>
</template>

Автозакрытие

Свойство timeout управляет временем автозакрытия в миллисекундах, по умолчанию — 5000. Значения -1 и 0 отключают автозакрытие — уведомление остаётся до закрытия пользователем (closable). Наведение курсора и фокус внутри приостанавливают отсчёт.

Sandbox Storybook

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

<template>
  <div class="flex justify-center gap-2">
    <CdsNotificationAlert :timeout="4000" text="Уведомление закроется через 4 секунды">
      <template #activator="{ props }">
        <CdsButton text="Закроется через 4 секунды" v-bind="props" />
      </template>
    </CdsNotificationAlert>
    <CdsNotificationAlert :timeout="-1" closable status="info" text="Останется до закрытия вручную">
      <template #activator="{ props }">
        <CdsButton text="Без автозакрытия" variant="soft" color="brand" v-bind="props" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

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

Отмена действия

После необратимой операции уведомление даёт короткое окно для отмены: кнопка в слоте actions закрывает его через v-model, а увеличенный timeout оставляет время передумать.

Sandbox Storybook

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

const isActive = ref(false);
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Удалить черновик" variant="soft" color="brand" @click="isActive = true" />
    <CdsNotificationAlert
      v-model="isActive"
      title="Черновик удалён"
      text="Черновик заявки №42 удалён без возможности восстановления"
      status="warning"
      closable
      :timeout="8000"
    >
      <template #actions>
        <CdsButton text="Отменить" variant="soft" color="neutral" @click="isActive = false" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

Стек уведомлений

Каждый экземпляр — независимый оверлей: уведомления одной позиции складываются в вертикальный стек. При закрытии (update:model-value → false) удаляйте элемент из списка.

Sandbox Storybook

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

const statuses = CdsNotificationAlert.constants.statuses;

type Notification = {
  id: string;
  modelValue: boolean;
  status: (typeof statuses)[number];
  text: string;
  location: Anchor;
  closable: boolean;
};

const notifications = reactive<Notification[]>([]);
let uid = 0;

function addNotification(text: string, location: Anchor) {
  notifications.push({
    id: String(uid++),
    modelValue: true,
    status: statuses[Math.floor(Math.random() * statuses.length)],
    text,
    location,
    closable: true
  });
}

function onUpdateModelValue(value: boolean, id: string) {
  if (value) return;

  const index = notifications.findIndex((notification) => notification.id === id);
  if (index !== -1) notifications.splice(index, 1);
}
</script>

<template>
  <div class="flex gap-4 justify-around">
    <CdsButton text="Сверху слева" @click="addNotification('Тестовое уведомление', 'top left')" />
    <CdsButton
      text="Снизу справа"
      variant="soft"
      color="brand"
      @click="addNotification('Тестовое уведомление', 'bottom right')"
    />
    <CdsNotificationAlert
      v-for="notification in notifications"
      :key="notification.id"
      title="Заголовок"
      v-bind="notification"
      @update:model-value="(value) => onUpdateModelValue(value, notification.id)"
    >
      <template #actions>
        <CdsButton text="Кнопка" variant="soft" color="neutral" />
      </template>
    </CdsNotificationAlert>
  </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	boolean | undefined	—	Добавляет кнопку закрытия, скрывающую уведомление.
closeDelay	string | number | undefined	—	Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.
closeIcon	IconValue | undefined	'close'	Иконка кнопки закрытия.
closeLabel	string | undefined	'$cds.close'	Доступная подпись (aria-label) для кнопки закрытия.
closeOnBack	boolean | undefined	false	Закрывает содержимое оверлея при нажатии кнопки «Назад» в браузере или вызове $router.back(), отменяя исходную навигацию. persistent оверлеи отменяют навигацию и анимируются так, как будто по ним щелкнули за пределами оверлея, вместо того чтобы закрываться.
closeOnContentClick	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	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
height	string | number | undefined	—	Высота компонента
icon	false | IconValue | undefined	null	Иконка перед контентом. По умолчанию берётся из status; false скрывает иконку.
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	boolean | undefined	—	Значение компонента v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
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
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Семантический статус — определяет цвет и дефолтную иконку.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
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 и 0 отключают автозакрытие.
title	string | undefined	—	Заголовок уведомления.
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | null | undefined	'notification-transition'	Анимация перехода
variant	"default" | "flat" | "compact" | "important" | undefined	'important'	Внешний вид уведомления. По умолчанию important — приподнятая поверхность с тенью (внешний вид CdsNotificationAlert).
width	string | number | undefined	—	Ширина компонента
zIndex	string | number | undefined	2000	Значение z-index для компонента.

События

Имя	Тип	Описание
click:close	[event: MouseEvent]	Клик по кнопке закрытия.
update:modelValue	[value: boolean]	Событие изменения состояния видимости уведомления.

Слоты

Имя	Тип	Описание
actions	any	Слот действий (кнопки, ссылки) под текстом.
activator	{ isActive: boolean; props: Record<string, any>; }	Слот-активатор для управления показом уведомления.
append	any	Слот после контента.
close	{ props: Record<string, any>; }	Слот кнопки закрытия; получает props для привязки к своему элементу.
default	any	Основной контент уведомления (дополняет text).
prepend	any	Слот перед контентом (по умолчанию — иконка статуса).
text	any	Слот текста (вместо пропа text).
title	any	Слот заголовка (вместо пропа title).

Exposed

Имя	Тип	Описание
activatorEl	HTMLElement | undefined	DOM-элемент активатора.
activatorRef	TemplateRef	Template ref для назначения активатора вручную.
animateClick	() => void	Запускает bounce-анимацию контента — как при клике мимо persistent-оверлея.
contentEl	HTMLElement | undefined	DOM-элемент контента оверлея.
globalTop	boolean	Является ли оверлей верхним в глобальном стеке открытых оверлеев.
rootEl	HTMLElement | undefined	Корневой DOM-элемент оверлея.
scrimEl	HTMLElement | undefined	DOM-элемент подложки (scrim), затемняющей страницу.
targetEl	HTMLElement | undefined	DOM-элемент цели позиционирования.
targetRef	TemplateRef	Template ref для назначения цели позиционирования вручную.
updateLocation	((e: Event) => void) | undefined	Пересчитывает позицию контента относительно цели.