Bootstrap - Toasts: Пособие для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в奇妙ный мир Bootstrap Toasts. Не волнуйтесь, если вы никогда о них не слышали раньше - к концу этого руководства вы будете «жарить» как профи! ?

Bootstrap - Toasts

Что такое Bootstrap Toasts?

Прежде чем мы начнем, давайте разберемся, что такое Toasts. Представьте, что вы используете мобильное приложение, и вдруг в нижней части экрана появляется небольшое уведомление. Это essentially то, что такое Toast в веб-разработке! Это легковесное уведомление, предназначенное для имитации push-уведомлений, которые мы видим на мобильных устройствах.

Основной Toast

Давайте начнем с основного Toast. Вот как он выглядит в коде:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 минут назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Hello, world! This is a Toast message.
</div>
</div>

Давайте разберем это:

Внешний div с классом toast - наш основной контейнер.
Внутри мы имеем toast-header и toast-body.
Заголовок обычно содержит изображение, заголовок, штамп времени и кнопку закрытия.
Тело - это место, где идет наш основной текст.

Живой Toast

Теперь давайте оживим наш Toast! Для этого нам нужно немного JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Показать живой toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 минут назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Hello, World! This is a live toast message.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

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

Прозрачный Toast

Хотите сделать ваш Toast немного прозрачным? Просто добавьте класс bg-light:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 минут назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Hello, World! This is a translucent toast.
</div>
</div>

Стекающие Toasts

Что, если вы хотите показать несколько Toasts? Нет проблем! Bootstrap сложит их аккуратно:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>

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

Toasts не ограничиваются только текстом. Вы можете добавить любой HTML-контент, который вам нравится:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>

Здесь мы добавили кнопки в тело Toast. Будьте креативны!

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

Toasts могут быть разных цветов, чтобы соответствовать теме вашего сайта или указывать на различные типы сообщений:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 минут назад</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
</div>
<div class="toast-body">
Hello, world! This is a primary toast.
</div>
</div>

Вы можете заменить bg-primary на bg-success, bg-danger, bg-warning и т.д.

Размещение Toasts

Toasts могут быть размещены anywhere на вашей странице. Вот как разместить его в правом верхнем углу:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Your toast here -->
</div>
</div>

Доступность

Доступность имеет решающее значение! Всегда включайте атрибуты role="alert" и aria-live="assertive", чтобы убедиться, что экранные readers могут корректно объявить ваши Toasts.

Вот таблица, резюмирующая ключевые методы Toast:

Метод	Описание
show()	Показывает Toast
hide()	Скрывает Toast
dispose()	Скрывает Toast и удаляет его из DOM

И это все! Вы теперь мастер Toast. Помните, что практика делает perfect, так что попробуйте интегрировать это в ваш следующий проект. Счастливого кодирования! ?

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - индикаторы загрузки

Следующий учебник:

Bootstrap - Подсказки