Toast

Уведомления с очередью, автоматическим закрытием и паузой таймера при наведении.

Интерактивный пример

Нажмите кнопку — уведомление появится в правом верхнем углу страницы.

UiToastProvider, useToast, push, clear

Использование в приложении

Оберните приложение в UiToastProvider. useToast вызывается в любом дочернем компоненте.

<script setup lang="ts">
import { UiToastProvider, useToast } from '@neytron/compact-ui'

const toast = useToast()

function save() {
  toast.push({
    title: 'Сохранено',
    description: 'Изменения успешно применены',
    tone: 'success',
    duration: 5000,
  })
}
</script>

push() возвращает id уведомления. Также доступны remove(id) и clear().

Отдельный Toast

modelValue, title, description, tone, duration, dismissible, closeLabel

Локальное уведомление

Можно использовать без очереди.

Props

Prop	Тип	Default	Обязательный
modelValue	boolean	true	Нет
title	string	—	Нет
description	string	—	Нет
tone	UiToastTone	'neutral'	Нет
duration	number	5000	Нет
dismissible	boolean	true	Нет
closeLabel	string	—	Нет

События: update:modelValue, close. Слот: default.