Snackbar

Обязательные свойства

onClose

Свойство принимает функцию, которая вызовется после завершения анимации закрытия компонента. Обязательно удаляйте из DOM-дерева компонент Snackbar в обработчике onClose, иначе это будет мешать дальнейшему взаимодействию с элементами и повторному открытию компонента.

Текстовые элементы

Основной текст сообщения или уведомления передаётся через свойство children. Дополнительный текст под основным можно задать с помощью свойства subtitle.

Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от текста, задаётся свойством before и after соответственно.

В before рекомендуется размещать следующий контент:

• иконка размером 24px или 28px;
• аватар Avatar размером 32px;
• изображение Image размером 40px.

В after рекомендуется размещать следующий контент:

• кнопки Button размером size="s";
• иконки размером 24px.

Стили отображения

Задаётся свойством mode.

• "default" — стандартный вид компонент;
• "dark" — тёмная тема компонента.

Позиционирование

placement

Данное свойство отвечает за расположение компонента на экране.

• "top-start" — расположение в верхнем левом углу;
• "top" — расположение по центру сверху;
• "top-end" — расположение в верхнем правом углу;
• "bottom-start" — расположение в нижнем левом углу (по умолчанию);
• "bottom" — расположение по центру снизу;
• "bottom-end" — расположение в нижнем правом углу.

В зависимости от расположения изменяется анимация появления. Так для "top-start" появление компонента ожидается с верхнего левого края, а для "bottom" - снизу. Анимация скрытия происходит в обратном направлении. Также есть возможность скрыть компонент смахиванием в обратную от анимации появления сторону.

Отступы

С помощью offsetY можно задать отступ (в пикселях) снизу (для всех placement="bottom*") или сверху (для всех placement="top*"), чтобы компонент не перекрывал нужные элементы интерфейса.

Кнопка действия

С помощью свойства action можно задать название для кнопки действия.

<Snackbar action="Перейти в раздел «Понравилось»" onActionClick={() => alert('Ты - молодец!')}>
  Ссылка сохранена в закладки
</Snackbar>

Задать вариант расположения кнопки действия можно с помощью свойства layout:

• "vertical" — кнопка располагается справа от основного текста;
• "horizontal" — кнопка располагается под основным текстом.

По умолчанию на устройствах с шириной больше или равно ViewWidth.SMALL_TABLET или при наличии свойства after значение будет равно "vertical", в остальных случаях — "horizontal".

Обработать нажатие на кнопку действия можно с помощью свойства onActionClick.

Snackbar.Basic

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

Свойства и методы