Компонент Snackbar в WordPress используется для отображения кратковременных уведомлений пользователю. Он подходит для сообщений, не требующих срочного внимания, и автоматически исчезает через короткий промежуток времени, не прерывая текущую работу пользователя.
Руководство по дизайну
Snackbar предназначен для отображения кратких сообщений, которые пропадают через небольшой промежуток времени. Он также может содержать дополнительные опции, такие как возможность просмотра опубликованного сообщения, однако эти опции должны дублироваться в других элементах пользовательского интерфейса.
Руководство по разработке
Чтобы использовать Snackbar, необходимо указать сообщение через свойство children. Это свойство можно передать как простой текст или JSX-разметку для более сложных уведомлений.
Использование компонента
Пример отображения простого уведомления:
import { Snackbar } from '@wordpress/components';
const MySnackbarNotice = () => (
<Snackbar>Публикация прошла успешно.</Snackbar>
);
Для сложного уведомления можно использовать JSX-элементы:
import { Snackbar } from '@wordpress/components';
const MySnackbarNotice = () => (
<Snackbar>
<p>
Произошла ошибка: <code>{errorDetails}</code>.
</p>
</Snackbar>
);
Свойства компонента (Props)
Компонент Snackbar поддерживает множество свойств, каждое из которых описано ниже.
actions: NoticeAction[]
Массив объектов, каждый из которых должен содержать label (метка) и либо строку URL, либо функцию onClick. Это позволяет добавлять действия в уведомление, например, для выполнения перехода по ссылке или выполнения функции при нажатии.
- Обязательное: Нет
- По умолчанию:
[]
Пример использования:
const actions = [
{ label: 'Посмотреть', url: 'https://example.com/view-post' },
{ label: 'Отменить', onClick: () => console.log('Действие отменено') }
];
<Snackbar actions={actions}>Задача завершена успешно.</Snackbar>
children: string
Основное сообщение уведомления. Также используется в качестве сообщения для технологий помощи, если не указано свойство spokenMessage.
- Обязательное: Да
Пример:
<Snackbar>Изменения сохранены.</Snackbar>
explicitDismiss: boolean
Определяет, необходимо ли пользовательское действие для закрытия уведомления. По умолчанию уведомление исчезает автоматически, но при установке значения true оно будет отображаться до тех пор, пока пользователь его не закроет.
- Обязательное: Нет
- По умолчанию:
false
Пример:
<Snackbar explicitDismiss={true}>Не удалось сохранить изменения. Повторите попытку.</Snackbar>
icon: ReactNode
Иконка, отображаемая в уведомлении.
- Обязательное: Нет
- По умолчанию:
null
Пример:
import { Snackbar } from '@wordpress/components';
import { check } from '@wordpress/icons';
<Snackbar icon={check}>Публикация выполнена.</Snackbar>
listRef: MutableRefObject<HTMLDivElement | null>
Ссылка на список, содержащий Snackbar. Этот параметр обычно используется для управления фокусом и взаимодействиями внутри списка уведомлений.
- Обязательное: Нет
Пример:
import { useRef } from 'react';
const snackbarListRef = useRef(null);
<Snackbar listRef={snackbarListRef}>Элемент добавлен в список.</Snackbar>
onDismiss: () => void
Функция, выполняемая при закрытии уведомления. Это отличается от onRemove, который служит для удаления уведомления из пользовательского интерфейса.
- Обязательное: Нет
Пример:
const handleDismiss = () => console.log('Уведомление закрыто');
<Snackbar onDismiss={handleDismiss}>Уведомление было закрыто.</Snackbar>
onRemove: () => void
Функция, вызываемая при закрытии уведомления для его удаления из интерфейса. Она используется в случаях, когда нужно управлять состоянием и отображением уведомления.
- Обязательное: Нет
Пример:
const handleRemove = () => console.log('Уведомление удалено');
<Snackbar onRemove={handleRemove}>Элемент удален из списка.</Snackbar>
politeness: 'polite' | 'assertive'
Уровень вежливости для озвучивания сообщения, который передается через атрибут aria-live. Значение assertive используется для важной информации, требующей немедленного внимания. Значение polite применяется для рекомендаций, которые не должны прерывать текущие действия пользователя.
- Обязательное: Нет
- По умолчанию:
'polite'
Пример:
<Snackbar politeness="assertive">Важное уведомление: сервер не доступен.</Snackbar>
spokenMessage: string
Используется для предоставления индивидуального сообщения для технологий помощи. Если это свойство не указано, будет использоваться значение свойства children.
- Обязательное: Нет
- По умолчанию:
children
Пример:
<Snackbar spokenMessage="Сообщение о подтверждении действия">
Действие выполнено успешно.
</Snackbar>
Связанные компоненты
Для отображения сообщений, требующих более пристального внимания, можно использовать компонент Notice, который привлекает больше внимания и обычно не исчезает автоматически.
Заключение
Компонент Snackbar отличный инструмент для отображения кратковременных уведомлений пользователю.