VGToast

<div id="toast-placement" class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-surface btn-sm" data-placement="top left">top left</button>
  <button type="button" class="btn btn-surface btn-sm" data-placement="top center">top center</button>
  <button type="button" class="btn btn-surface btn-sm" data-placement="top right">top right</button>
  <button type="button" class="btn btn-surface btn-sm" data-placement="bottom left">bottom left</button>
  <button type="button" class="btn btn-surface btn-sm" data-placement="bottom center">bottom center</button>
  <button type="button" class="btn btn-surface btn-sm" data-placement="bottom right">bottom right</button>
</div>
<label class="d-block mt-3" for="toast-effect">Эффект</label>
<select id="toast-effect" class="form-select">
  <option value="none">none</option>
  <option value="fade">fade</option>
  <option value="zoom">zoom</option>
  <option value="blur">blur</option>
  <option value="slide-up">slide-up</option>
  <option value="slide-down">slide-down</option>
</select>

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

function initToastDemo() {
  const group = document.querySelector('#toast-placement');
  if (!group) return;
  group.addEventListener('click', event => {
    const button = event.target.closest('[data-placement]');
    if (!button) return;
    VGToast.run(button.textContent, {
      theme: '', placement: button.dataset.placement,
      animation: {enable: false, delay: 300, effect: document.querySelector('#toast-effect').value},
    });
  });
}

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; }

<div class="d-flex flex-wrap gap-2">
<button type="button" id="toast-stack" class="btn btn-primary btn-sm">Добавить в стек (максимум 3)</button>
<button type="button" id="toast-replace" class="btn btn-primary btn-sm">Заменить уведомления</button>
<button type="button" id="toast-clear" class="btn btn-primary btn-sm">Скрыть все</button>
</div>

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

function initToastDemo() {
  const button = document.querySelector('#toast-stack');
  if (!button) return;
  let count = 0;
  button.addEventListener('click', () => VGToast.run('Сообщение №' + (++count), {
    theme: '', autohide: false, placement: 'top right', stack: {enable: true, max: 3},
  }));
  document.querySelector('#toast-replace').addEventListener('click', () => VGToast.run('Единственное уведомление №' + (++count), {
    theme: '', autohide: false, placement: 'top right', stack: {enable: false},
  }));
  document.querySelector('#toast-clear').addEventListener('click', () => {
    document.querySelectorAll('.vg-toast.show').forEach(element => VGToast.getInstance(element)?.hide());
  });
}

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-interaction-trigger" class="btn btn-primary btn-sm">Открыть панель</button>
<div id="toast-interaction" class="vg-toast bottom center" role="status" aria-live="polite" >
  <div class="vg-toast-wrapper">
    <div class="vg-toast-content"><div class="vg-toast-body">Перетащите панель за текст. Потяните за край, чтобы изменить размер.</div></div>
    <div class="vg-toast-button"><button type="button" class="vg-btn-close" data-vg-dismiss="toast" aria-label="Закрыть уведомление"></button></div>
  </div>
</div>

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

function initToastDemo() {
  const element = document.querySelector('#toast-interaction');
  if (!element) return;
  const instance = VGToast.getOrCreateInstance(element, {
    static: true, autohide: false, enableClickToast: false,
    drag: {enable: true, selector: '.vg-toast-wrapper'},
    resize: {enable: true, minWidth: 240, minHeight: 80},
    animation: {enable: false, delay: 0},
  });
  document.querySelector('#toast-interaction-trigger').addEventListener('click', () => instance.show());
}

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; }