Toast

Спливне сповіщення з варіантами, діями та автозакриттям. Сповіщення створюються зі скрипту через useToast, тож розмітку розміщувати не потрібно — модуль сам монтує хост сповіщень.

Живе демо

Варіанти

Позиції

Дії

Обробники виконуються, після чого сповіщення закривається саме. Передайте keepOpen, щоб залишити його, або викличте close() з обробника, щоб закрити достроково. Наведення на стек призупиняє всі зворотні відліки в ньому.

Видимий таймаут

showTimeout малює смугу вздовж нижнього краю, що зменшується рівно за timeout сповіщення. Наведення чи фокус на стеку заморожує смугу разом зі зворотним відліком, який вона показує. Закріплене сповіщення (timeout: 0) смуги не має — відлічувати нічого.

Обмеження елементом

Передайте target, щоб тримати сповіщення в межах однієї області, а не в куті в'юпорту.

Ця панель має власний стек сповіщень.

Використання

Базове

<script setup>
const { showToast } = useToast();

function save() {
  showToast({ message: "Changes saved", variant: "success" });
}
</script>

З діями

<script setup>
const { showToast } = useToast();

function deleteFile(file) {
  trash(file);

  showToast({
    title: "File deleted",
    message: `${file.name} moved to trash.`,
    variant: "alert",
    timeout: 0,
    actions: [{ label: "Undo", onClick: () => restore(file) }],
  });
}
</script>

Окремий компонент

<orio-toast> працює й самостійно — на сторінці, у списку чи у власному контейнері, — коли потрібне статичне повідомлення, а не сповіщення з черги. Він генерує події, а не діє сам, тож закрити його можете лише ви. Слот actions — найпростіший спосіб під'єднати кнопки тут; проп actions очікує обробники у форматі для черги.

Сховище майже заповнене

Ви використали 92% свого тарифу.

<template>
  <orio-toast
    v-if="!dismissed"
    title="Storage almost full"
    message="You have used 92% of your plan."
    variant="alert"
    @close="dismissed = true"
  >
    <template #actions>
      <orio-button @click="goToBilling">Upgrade</orio-button>
    </template>
  </orio-toast>
</template>

Пропси

Проп	Тип	За замовчуванням	Опис
message	string	""	Основний текст; ігнорується, якщо використано слот за замовчуванням
title	string	—	Жирний рядок над повідомленням
variant	"info" | "success" | "alert" | "danger"	"info"	Колірна група та терміновість для скрінрідерів
closable	boolean	true	Рендерить кнопку закриття
timeout	number	0	Тривалість смуги відліку в мс
showTimeout	boolean	false	Малює смугу відліку; потребує timeout > 0
paused	boolean	false	Заморожує смугу відліку
actions	ToastAction[]	[]	Кнопки з кінцевого боку

Події

Подія	Дані	Опис
close	—	Натиснуто кнопку закриття
action	ToastAction	Натиснуто одну з кнопок дій

Слоти

Слот	Пропси	Опис
default	—	Замінює текст повідомлення
actions	{ actions, close }	Замінює кнопки дій

Доступність

• Сповіщення danger рендеряться з role="alert", усі інші варіанти — з role="status".
• Підпис кнопки закриття береться з i18n (toast.close).
• Наведення чи фокус на стеку призупиняє його відліки, тож користувачам клавіатури не доводиться змагатися з таймаутом.