Всплывающие сообщения

Всплывающие сообщения (Toasts) - это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.

Обзор

Что нужно знать при использовании:

• Всплывающие сообщения включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
• Всплывающие сообщения будут автоматически скрываться, если вы не укажете autohide: false.

Примеры

Основной

Чтобы поощрять расширяемые и предсказуемые тосты, мы рекомендуем заголовок и тело. Заголовки тостов используют display: flex, что позволяет легко выравнивать контент благодаря нашим утилитам margin и flexbox.

Тосты настолько гибкие, насколько Вам нужно, и требуют очень небольшой разметки. Как минимум, мы требуем, чтобы Ваш “всплывающий” контент содержал один элемент, и настоятельно рекомендуем кнопку «закрыть».

<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение.
</div></div>

Живой пример

Нажмите кнопку ниже, чтобы отобразить тост (расположенный с нашими утилитами в правом нижнем углу), который по умолчанию скрыт.

<buttontype="button"class="btn btn-primary"id="liveToastBtn">Показать пример</button><divclass="toast-container position-fixed bottom-0 end-0 p-3"><divid="liveToast"class="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет, мир! Это тост-сообщение.
</div></div></div>

Мы используем следующий код JavaScript для запуска нашей демонстрации тостов:

consttoastTrigger=document.getElementById('liveToastBtn')consttoastLiveExample=document.getElementById('liveToast')if(toastTrigger){consttoastBootstrap=bootstrap.Toast.getOrCreateInstance(toastLiveExample)toastTrigger.addEventListener('click',()=>{toastBootstrap.show()})}

Полупрозрачность

Тосты слегка полупрозрачны, чтобы гармонировать с тем, что находится под ними.

<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-body-secondary">11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение.
</div></div>

Стек

Вы можете складывать всплывающие сообщения, завернув их в контейнер для тостов, который по вертикали добавит некоторого расстояния.

<divclass="toast-container position-static"><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-body-secondary">прямо сейчас</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Видите? Именно так.
</div></div><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-body-secondary">2 секунды назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Внимание, всплывающие сообщения складываются автоматически
</div></div></div>

Пользовательский контент

Настройте тосты, удалив подкомпоненты, настроив их с помощью утилит или добавив собственную разметку. Здесь мы создали более простой тост, удалив стандартный .toast-header, добавив собственную иконку скрытия из Bootstrap Icons и используя некоторые утилиты flexbox для настройки макета.

<divclass="toast align-items-center"role="alert"aria-live="assertive"aria-atomic="true"><divclass="d-flex"><divclass="toast-body"> Привет, мир! Это тост-сообщение.
</div><buttontype="button"class="btn-close me-2 m-auto"data-bs-dismiss="toast"aria-label="Закрыть"></button></div></div>

Кроме того, Вы также можете добавить в тосты дополнительные элементы управления и компоненты.

<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-body"> Привет мир! Это тост-сообщение.
<divclass="mt-2 pt-2 border-top"><buttontype="button"class="btn btn-primary btn-sm">Действовать</button><buttontype="button"class="btn btn-secondary btn-sm"data-bs-dismiss="toast">Закрыть</button></div></div></div>

Цветовые схемы

Основываясь на приведенном выше примере, вы можете создавать различные цветовые схемы всплывающих уведомлений с помощью утилит цвета и фона. Здесь мы добавили .text-bg-primary к .toast, а затем добавили .btn-close-white к нашей кнопке закрытия. Для четкого края мы удаляем границу по умолчанию с помощью .border-0.

<divclass="toast align-items-center text-bg-primary border-0"role="alert"aria-live="assertive"aria-atomic="true"><divclass="d-flex"><divclass="toast-body"> Привет, мир! Это тост-сообщение.
</div><buttontype="button"class="btn-close btn-close-white me-2 m-auto"data-bs-dismiss="toast"aria-label="Закрыть"></button></div></div>

Размещение

Размещайте тосты с настраиваемым CSS по мере необходимости. Верхний правый угол часто используется для уведомлений, как и верхний средний. Если Вы собираетесь показывать только один тост за раз, поместите стили позиционирования прямо в .toast.

<form><divclass="mb-3"><labelfor="selectToastPlacement">Размещение тостов</label><selectclass="form-select mt-2"id="selectToastPlacement"><optionvalue=""selected>Выберите позицию...</option><optionvalue="top-0 start-0">Верх слева</option><optionvalue="top-0 start-50 translate-middle-x">Верх по центру</option><optionvalue="top-0 end-0">Верх справа</option><optionvalue="top-50 start-0 translate-middle-y">Середина слева</option><optionvalue="top-50 start-50 translate-middle">Середина по центру</option><optionvalue="top-50 end-0 translate-middle-y">Середина справа</option><optionvalue="bottom-0 start-0">Низ слева</option><optionvalue="bottom-0 start-50 translate-middle-x">Низ по центру</option><optionvalue="bottom-0 end-0">Низ справа</option></select></div></form><divaria-live="polite"aria-atomic="true"class="bg-body-secondary position-relative bd-example-toasts rounded-3"><divclass="toast-container p-3"id="toastPlacement"><divclass="toast"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small></div><divclass="toast-body"> Привет мир! Это тост-сообщение.
</div></div></div></div>

Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента упаковки, чтобы их можно было легко складывать.

<divaria-live="polite"aria-atomic="true"class="position-relative"><!-- Позиционируйте его: --><!-- - `.toast-container` для промежутка между тостами --><!-- - `top-0` и `end-0` чтобы тосты располагались в правом верхнем углу --><!-- - `.p-3` чтобы тосты не прилипали к краю контейнера --><divclass="toast-container top-0 end-0 p-3"><!-- Затем положите тосты внутрь --><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-body-secondary">прямо сейчас</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Видно? Именно так.
</div></div><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><smallclass="text-body-secondary">2 секунды назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Внимание, тосты складываются автоматически
</div></div></div></div>

Вы также можете поработать с утилитами flexbox для выравнивания тостов по горизонтали и/или вертикали.

<!-- Flexbox container for aligning the toasts --><divaria-live="polite"aria-atomic="true"class="d-flex justify-content-center align-items-center w-100"><!-- Затем положите тосты внутрь --><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение.
</div></div></div>

Доступность

Тосты предназначены для того, чтобы немного отвлекать посетителей или пользователей, поэтому, чтобы помочь тем, у кого есть программы чтения с экрана и аналогичные вспомогательные технологии, вы должны заключить свои тосты в области aria-live. Изменения в живых регионах (такие как внедрение / обновление компонента тоста) автоматически объявляются программами чтения с экрана без необходимости перемещать фокус пользователя или иным образом прерывать пользователя. Кроме того, включите aria-atomic="true", чтобы гарантировать, что весь тост всегда объявляется как единая (атомарная) единица, а не просто объявляет, что было изменено (что может привести к проблемам, если вы обновите только часть содержимого тоста, или при отображении того же содержимого тоста в более поздний момент времени). Если необходимая информация важна для процесса, например для получения списка ошибок в форме используйте компонент уведомления вместо тоста.

Обратите внимание, что живая область должна присутствовать в разметке до создания или обновления тоста. Если Вы динамически генерируете и то, и другое одновременно и вставляете их на страницу, они обычно не будут объявляться вспомогательными технологиями.

Вам также необходимо адаптировать уровни role и aria-live в зависимости от контента. Если это важное сообщение, такое как ошибка, используйте role="alert" aria-live="assertive", иначе используйте атрибуты role="status" aria-live="polite".

По мере изменения содержимого, которое вы показываете, не забудьте обновить таймаут delay, чтобы у пользователей было достаточно времени, чтобы прочитать тост.

<divclass="toast"role="alert"aria-live="polite"aria-atomic="true"data-bs-delay="10000"><divrole="alert"aria-live="assertive"aria-atomic="true">...</div></div>

При использовании autohide: false Вы должны добавить кнопку закрытия, чтобы пользователи могли закрыть всплывающее сообщение.

<divrole="alert"aria-live="assertive"aria-atomic="true"class="toast"data-bs-autohide="false"><divclass="toast-header"><imgsrc="..."class="rounded me-2"alt="..."><strongclass="me-auto">Bootstrap</strong><small>11 мин. назад</small><buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button></div><divclass="toast-body"> Привет мир! Это тост-сообщение.
</div></div>

Хотя технически можно добавить в тосты настраиваемые/активные элементы управления (например, дополнительные кнопки или ссылки), вам следует избегать этого для автоматического скрытия тостов. Даже если вы зададите тосту длинный тайм-аут delay, пользователям клавиатуры и вспомогательных технологий может быть трудно вовремя добраться до тоста, чтобы принять меры (поскольку тосты не получают фокус при отображении) . Если вам абсолютно необходимы дополнительные элементы управления, мы рекомендуем использовать всплывающее окно с autohide: false.

CSS

Переменные

Как часть развивающегося подхода Bootstrap к переменным CSS, тосты теперь используют локальные переменные CSS в .toast для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

--#{$prefix}toast-zindex:#{$zindex-toast};--#{$prefix}toast-padding-x:#{$toast-padding-x};--#{$prefix}toast-padding-y:#{$toast-padding-y};--#{$prefix}toast-spacing:#{$toast-spacing};--#{$prefix}toast-max-width:#{$toast-max-width};@include rfs($toast-font-size,--#{$prefix}toast-font-size);--#{$prefix}toast-color:#{$toast-color};--#{$prefix}toast-bg:#{$toast-background-color};--#{$prefix}toast-border-width:#{$toast-border-width};--#{$prefix}toast-border-color:#{$toast-border-color};--#{$prefix}toast-border-radius:#{$toast-border-radius};--#{$prefix}toast-box-shadow:#{$toast-box-shadow};--#{$prefix}toast-header-color:#{$toast-header-color};--#{$prefix}toast-header-bg:#{$toast-header-background-color};--#{$prefix}toast-header-border-color:#{$toast-header-border-color};

Переменные Sass

$toast-max-width:350px;$toast-padding-x:.75rem;$toast-padding-y:.5rem;$toast-font-size:.875rem;$toast-color:null;$toast-background-color:rgba(var(--#{$prefix}body-bg-rgb),.85);$toast-border-width:var(--#{$prefix}border-width);$toast-border-color:var(--#{$prefix}border-color-translucent);$toast-border-radius:var(--#{$prefix}border-radius);$toast-box-shadow:var(--#{$prefix}box-shadow);$toast-spacing:$container-padding-x;$toast-header-color:var(--#{$prefix}secondary-color);$toast-header-background-color:rgba(var(--#{$prefix}body-bg-rgb),.85);$toast-header-border-color:$toast-border-color;

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

Инициализировать тосты через JavaScript:

consttoastElList=document.querySelectorAll('.toast')consttoastList=[...toastElList].map(toastEl=>newbootstrap.Toast(toastEl,option))

Триггеры

Отклонение может быть достигнуто с помощью атрибута data-bs-dismiss на кнопке ** внутри toast**, как показано ниже:

<buttontype="button"class="btn-close"data-bs-dismiss="toast"aria-label="Закрыть"></button>

или на кнопке вне toast, используя дополнительный data-bs-target, как показано ниже:

<buttontype="button"class="btn-close"data-bs-dismiss="toast"data-bs-target="#my-toast"aria-label="Закрыть"></button>

Параметры

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

Методы

События

constmyToastEl=document.getElementById('myToast')myToastEl.addEventListener('hidden.bs.toast',()=>{// сделайте что-нибудь...
})