Snackbar – стильные уведомления, вдохновленные Google Material Design

Привет, коллеги-разработчики! Сегодня мы углубимся в одну из самых крутых функций Google Material Design — Snackbar. Если вы хотите добавить элегантные и стильные уведомления в свое веб-приложение, вы попали по адресу. Итак, хватайте свой любимый напиток и начнем!

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

Теперь давайте перейдем к коду и рассмотрим некоторые методы реализации Snackbar в вашем веб-приложении.

Метод 1: использование компонента Snackbar Material-UI (React)

Если вы работаете с React, Material-UI предоставляет компонент Snackbar, который вы можете легко включить в свой проект. Вот пример того, как его использовать:

import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';
const MySnackbar = () => {
  const [open, setOpen] = React.useState(false);
  const handleClick = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <button onClick={handleClick}>Show Snackbar</button>
      <Snackbar
        open={open}
        onClose={handleClose}
        message="Hello, Snackbar!"
        autoHideDuration={3000}
      />
    </div>
  );
};
export default MySnackbar;

Метод 2: использование панели Materialize CSS Snackbar (ванильный JavaScript)

Если вы предпочитаете работать с обычным JavaScript, Materialize CSS предоставляет удобный компонент Snackbar. Вот пример того, как его использовать:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </head>
  <body>
    <button onclick="showSnackbar()">Show Snackbar</button>
    <script>
      function showSnackbar() {
        M.toast({ html: 'Hello, Snackbar!' });
      }
    </script>
  </body>
</html>

Метод 3: использование панели загрузки Bootstrap (jQuery)

Если вы являетесь поклонником Bootstrap и jQuery, вы можете использовать компонент Snackbar, предоставляемый Bootstrap. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button onclick="showSnackbar()">Show Snackbar</button>
    <script>
      function showSnackbar() {
        $('#snackbar').toast('show');
      }
    </script>
    <div
      id="snackbar"
      class="toast"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="toast-body">
        Hello, Snackbar!
      </div>
    </div>
  </body>
</html>

И вот оно! Три разных метода реализации Snackbars в вашем веб-приложении, в зависимости от предпочитаемой вами платформы или библиотеки. Не стесняйтесь исследовать дальше и настраивать внешний вид и поведение Snackbars в соответствии с дизайном вашего приложения.

Теперь впечатляйте своих пользователей этими элегантными и стильными уведомлениями, вдохновленными Google Material Design. Приятного кодирования!