Как создать Snackbar с помощью HMTL, CSS и JavaScript?

Опубликовано: 9 Декабря, 2021

Закуски в веб-дизайне - это уведомления , которые отображаются на сайте. Иногда разработчики хотят отображать дополнительные уведомления для пользователей, чтобы они знали определенную информацию, которая важна, но в то же время не должна влиять на взаимодействие с пользователем. Эта информация может быть о каком-либо событии, которое произошло или будет происходить на веб-сайте, независимо от того, было ли оно успешным или требующим быстрого ввода или вмешательства пользователя.

Snackbar информирует пользователей о процессах, которые веб-сайт будет выполнять, или предоставляет обратную связь о процессах, которые веб-сайт уже выполнил. Например, неудачный вызов API и т. Д. Они обычно происходят в нижней части экрана на веб-сайте и не должны мешать текущему потоку или взаимодействию с пользователем. Обычно они исчезают сами по себе, если не требуется вмешательство пользователя. Панели закусок должны отображаться только по одной, чтобы не засорять экран. Обычно они содержат одно действие, такое как Отказ / Отмена / ОК, и могут также использоваться как часть обработки ошибок. Они также могут быть вызваны настраиваемыми действиями, например, когда пользователь нажимает кнопку.

Bootstrap и jQuery предоставляют обширную поддержку уведомлений о закусках с помощью классов и плагинов, но они также могут быть разработаны и реализованы без каких-либо внешних библиотек, просто используя только HTML , CSS и JavaScript . Также важно знать, что многие веб-фреймворки, такие как Angular 4+, ReactJS и т. Д., И приложения Android также поддерживают уведомления Snackbar и могут быть реализованы с использованием собственных классов и методов. Подробное объяснение см. В статьях:

Как добавить Snackbar в Android
Как создать сервис SnackBar?

В этом руководстве мы реализуем уведомления Snackbar для веб-сайта, используя только HTML, CSS и JavaScript.
Мы предполагаем, что вы знакомы с правилами HTML и CSS и имеете базовые знания в области анимации CSS.

Шаг 1. Установите Browsersync с помощью npm . Мы будем использовать Browsersync для запуска сервера и предоставления URL-адреса для просмотра веб-сайта HTML, анимации CSS и загрузки соответствующих файлов JavaScript. Мы установим Browsersync глобально.
```
 npm install -g browser-sync
```

Шаг 2: Создайте файл index.html, файл index.css и index.js в корневой папке проекта.

index.html: добавьте в этот файл следующий фрагмент кода.

html

 <!DOCTYPE html>
 < html lang = "en" >
 < head >
    < meta charset = "UTF-8" >
    < meta name = "viewport"
          content=" width = device -width,
                   initial-scale = 1 .0">
    < title >GeeksforGeeks</ title >
    <!-- Loading External index.css file -->
    < link rel = "stylesheet" href = "index.css" >
 </ head >
 < body >
    < h2 >
     GeeksforGeeks - Snackbar using HTML, CSS & JS
    </ h2 >
 
    <!-- Custom Action to Trigger the Snackbar -->
    < button class = "btn btn-lg"
            onclick = "showSnackbar()" >
         Show Snackbar
    </ button >
    < div id = "snackbar" >Hello GeeksforGeeks</ div >
    <!-- Loading External index.js file -->
    < script src = "index.js" ></ script >
 </ body >
 </ html > 

index.css: по умолчанию мы установили скрытие HTML-элемента #snackbar с помощью свойства видимости CSS. Мы также определили позицию: fixed; и z-index: 1; Свойства CSS для уведомления Snackbar, чтобы, когда оно стало видимым, оно всегда отображалось над экраном для пользователя. Обратитесь к комментариям к коду для лучшего понимания. Свойство ! Important CSS указывает, что все другие конфликтующие правила для элемента HTML DOM должны быть проигнорированы, и должно применяться правило, обозначенное! Important. Это правило отменяет все ранее установленные правила CSS. Мы использовали простую CSS-анимацию, чтобы отображать уведомление Snackbar для пользователей, постепенно переходя на экран и исчезая с него. Подробное объяснение этого можно найти здесь. Общее время, установленное для анимации CSS, зависит от ограничения по времени, в течение которого мы хотим, чтобы уведомление было видимым для пользователя. Время затухания CSS-анимации рассчитывается соответственно путем вычитания 0,5 секунды из общего времени в нашем случае.

css

 #snackbar {
    /* By Default, Hidden */
    visibility : hidden ;
    min-width : 250px ;
    background-color : #333 ;
    color : #fff ;
    text-align : left ;
    border-radius: 2px ;
    padding : 16px ;
    /* To always Keep on
       Top of screen */
    position : fixed ;
 
    /* To be displayed above
       Parent HTML DOM element */
    z-index : 1 ;
 
    /* Position Bottom Left
       Corner of Screen */
    left : 10px ;
    bottom : 30px ;
 }
 
/* Dynamically Appending this
   Class to #snackbar via JS */
 .show-bar {
    visibility : visible !important ;
    /* fadeout Time decided in
       accordance to Total Time */
    /* In case, Time = 3s,
       fadeout 0.5s 2.5s */
    animation: fadein 0.5 s, fadeout 0.5 s 4.5 s;
 }
 
/* when the Snackbar Appears */
 @keyframes fadein {
    from {
        bottom : 0 ;
        opacity: 0 ;
    }
    to {
        bottom : 30px ;
        opacity: 1 ;
    }
 }
 
/* when the Snackbar Disappears
   from the Screen */
 @keyframes fadeout {
    from {
        bottom : 30px ;
        opacity: 1 ;
    }
    to {
        bottom : 0 ;
        opacity: 0 ;
    }
 }

index.js: мы использовали JavaScript для динамического добавления класса к элементу HTML div во время нажатия кнопки «Показать панель закусок». Функция showSnackbar () запускается свойством onClick HTML Button. Динамически добавляемый класс добавляет правила CSS к HTML-элементу #snackbar, что делает его видимым для пользователя. Мы использовали функцию JavaScript setTimeout () для динамического удаления ранее добавленного класса через 5 секунд, что приведет к исчезновению уведомления Snackar.

JS

 function showSnackbar() {
    var snackBar =
      document.getElementById( "snackbar" )
    // Dynamically Appending class
    // to HTML element
    snackBar.className = "show-bar" ;
 
    setTimeout( function () {
       // Dynamically Removing the Class
       // from HTML element
       // By Replacing it with an Empty
       // String after 5 seconds
       snackBar.className =
          snackBar.className.replace( "show-bar" , "" );
    }, 5000);
 }

Шаг 3: Мы успешно реализовали уведомления Snackbar с использованием HTML, CSS и JavaScript. В HTML мы определили настраиваемую кнопку Show Snackbar , которая будет запускать уведомление Snackbar на экране. Уведомление Snackbar - это простое текстовое сообщение, которое отображается пользователю. Так как Snackbar - это простой элемент HTML «div», мы можем добавлять настраиваемые действия в уведомление Snackbar. Например, «поле ввода» или «кнопка отклонения», если требуется. В нашем случае уведомление о снэк-баре автоматически исчезнет с экрана через 5 секунд.
Выход:
Шаг 4: На этом этапе наше уведомление о Snackbar готово. Чтобы запустить приложение с помощью Browsersync, выполните следующую команду в каталоге проекта или вы можете запустить HTML-файл прямо в браузере.
```
 браузер-синхронизация start --server --files "*"
```
Это запускает Browsersync в режиме сервера и отслеживает все файлы в каталоге на предмет изменений, указанных с помощью подстановочного знака *. По умолчанию приложение будет запущено по адресу http: // localhost: 3000 /.
Выход:

JavaScript HTML JavaScript-Misc CSS Bootstrap

Как создать Snackbar с помощью HMTL, CSS и JavaScript?

html

css

JS

РЕКОМЕНДУЕМЫЕ СТАТЬИ