VGToast

<button type="button" id="toast-quick" class="btn btn-primary btn-sm">Показать уведомление</button>

/**
 * Описание: быстрое уведомление с автоскрытием.
 * Возможности: рабочий пример публичного API VGToast.
 */
import { VGToast } from 'vgapp';

function initToastDemo() {
  const button = document.querySelector('#toast-quick');
  if (!button) return;
  button.addEventListener('click', () => {
    VGToast.run(['Готово', 'Изменения сохранены.'], {theme: '', delay: 3000});
  });
}

initToastDemo();

/* Композиция демо и публичные переменные VGToast. Тему переключает OKAUX. */
.page-module-toast .vg-toast {
  --vg-toast-width: min(28rem, 100%);
  --vg-toast-border-radius: var(--vg-radius-lg);
  --vg-toast-background-color: var(--vg-bg-secondary);
  --vg-toast-color: var(--vg-text-primary);
  --vg-toast-border-color: var(--vg-border-default);
}
.page-module-toast .vg-toast-content { min-width: 0; overflow-wrap: anywhere; }
.module-toast-content { min-width: 0; }
.toast-demo-log { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--vg-bg-secondary); border: 1px solid var(--vg-border-default); border-radius: var(--vg-radius-lg); }
.toast-demo-reference { overflow-wrap: anywhere; }
.toast-demo-reference dt { margin-top: 1rem; font-family: monospace; }
.toast-demo-reference dd { margin: .25rem 0 0; }

<button type="button" id="toast-data-trigger" data-vg-toggle="toast" data-vg-target="#toast-data" aria-controls="toast-data" aria-expanded="false" class="btn btn-primary btn-sm">Открыть / закрыть</button>
<div id="toast-data" class="vg-toast bottom center" role="status" aria-live="polite" data-params='{"enableClickToast":false}'>
  <div class="vg-toast-wrapper">
    <div class="vg-toast-content"><div class="vg-toast-body">Статический тост остаётся в DOM после закрытия.</div></div>
    <div class="vg-toast-button"><button type="button" class="vg-btn-close" data-vg-dismiss="toast" aria-label="Закрыть уведомление"></button></div>
  </div>
</div>

/**
 * Описание: декларативный пример VGToast.
 * Возможности: переключение и закрытие через Data API.
 */
// Дополнительная инициализация не требуется: используется Data API.

/* Композиция демо и публичные переменные VGToast. Тему переключает OKAUX. */
.page-module-toast .vg-toast {
  --vg-toast-width: min(28rem, 100%);
  --vg-toast-border-radius: var(--vg-radius-lg);
  --vg-toast-background-color: var(--vg-bg-secondary);
  --vg-toast-color: var(--vg-text-primary);
  --vg-toast-border-color: var(--vg-border-default);
}
.page-module-toast .vg-toast-content { min-width: 0; overflow-wrap: anywhere; }
.module-toast-content { min-width: 0; }
.toast-demo-log { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--vg-bg-secondary); border: 1px solid var(--vg-border-default); border-radius: var(--vg-radius-lg); }
.toast-demo-reference { overflow-wrap: anywhere; }
.toast-demo-reference dt { margin-top: 1rem; font-family: monospace; }
.toast-demo-reference dd { margin: .25rem 0 0; }

<div id="toast-types" class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-surface btn-sm" data-toast-type="success">Успех</button>
  <button type="button" class="btn btn-surface btn-sm" data-toast-type="error">Ошибка</button>
  <button type="button" class="btn btn-surface btn-sm" data-toast-type="warning">Предупреждение</button>
  <button type="button" class="btn btn-surface btn-sm" data-toast-type="info">Информация</button>
</div>

/**
 * Описание: типы уведомлений.
 * Возможности: рабочий пример публичного API VGToast.
 */
import { VGToast } from 'vgapp';

function initToastDemo() {
  const group = document.querySelector('#toast-types');
  if (!group) return;
  group.addEventListener('click', event => {
    const button = event.target.closest('[data-toast-type]');
    if (!button) return;
    VGToast.run([button.textContent, 'Тип определяет иконку, theme — цвет.'], {
      type: button.dataset.toastType, theme: '', delay: 4000,
    });
  });
}

initToastDemo();

/* Композиция демо и публичные переменные VGToast. Тему переключает OKAUX. */
.page-module-toast .vg-toast {
  --vg-toast-width: min(28rem, 100%);
  --vg-toast-border-radius: var(--vg-radius-lg);
  --vg-toast-background-color: var(--vg-bg-secondary);
  --vg-toast-color: var(--vg-text-primary);
  --vg-toast-border-color: var(--vg-border-default);
}
.page-module-toast .vg-toast-content { min-width: 0; overflow-wrap: anywhere; }
.module-toast-content { min-width: 0; }
.toast-demo-log { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: var(--vg-bg-secondary); border: 1px solid var(--vg-border-default); border-radius: var(--vg-radius-lg); }
.toast-demo-reference { overflow-wrap: anywhere; }
.toast-demo-reference dt { margin-top: 1rem; font-family: monospace; }
.toast-demo-reference dd { margin: .25rem 0 0; }