Компонент Notice в WordPress: создание уведомлений с примерами

Главная - WordPress Codex - Компонент Notice в WordPress: создание уведомлений с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент Notice в WordPress предназначен для отображения сообщений пользователю, информирующих о состоянии системы, результатах действий или предупреждающих об ошибках. Он обеспечивает ненавязчивое взаимодействие, позволяя пользователю при необходимости закрыть уведомление.

Основное описание Notice

Компонент Notice может отображать текстовые уведомления, а также содержать дополнительные действия, такие как кнопки с переходом на другие страницы или выполнением функций. Уведомления можно кодировать с разными цветами, в зависимости от типа сообщения:

  • Информационные — синий цвет;
  • Успешные — зеленый цвет;
  • Предупреждения — желтый цвет;
  • Ошибки — красный цвет.

Использование Notice

Уведомления располагаются в верхней части экрана, под основными инструментами. Они не блокируют работу пользователя с интерфейсом, позволяя продолжить взаимодействие и закрыть уведомление по желанию.

Пример использования Notice

import { Notice } from '@wordpress/components';

const MyNotice = () => (
    <Notice status="error">Произошла неизвестная ошибка.</Notice>
);

Свойства (Props) компонента Notice

1. children
  • Описание: Сообщение, отображаемое в уведомлении. Также используется как озвучиваемое сообщение для вспомогательных технологий, если не задано свойство spokenMessage.
  • Обязательный: Да
  • Тип: ReactNode
2. spokenMessage
  • Описание: Позволяет задать альтернативное озвучиваемое сообщение вместо значения children.
  • Обязательный: Нет
  • Тип: ReactNode
  • По умолчанию: children
3. status
  • Описание: Определяет цвет уведомления: warning (желтый), success (зеленый), error (красный) или info (синий).
  • Обязательный: Нет
  • Тип: 'warning' | 'success' | 'error' | 'info'
  • По умолчанию: info
4. onRemove
  • Описание: Функция, вызываемая для удаления уведомления.
  • Обязательный: Нет
  • Тип: () => void
  • По умолчанию: noop
5. politeness
  • Описание: Уровень вежливости для озвучиваемого сообщения (параметр для aria-live).
  • Обязательный: Нет
  • Тип: 'polite' | 'assertive'
  • По умолчанию: 'assertive' или 'polite' в зависимости от статуса уведомления.
6. isDismissible
  • Описание: Определяет, можно ли закрыть уведомление.
  • Обязательный: Нет
  • Тип: boolean
  • По умолчанию: true
7. onDismiss
  • Описание: Устаревшее свойство для удаления уведомления; рекомендуется использовать onRemove.
  • Обязательный: Нет
  • Тип: () => void
  • По умолчанию: noop
8. actions
  • Описание: Массив действий, связанных с уведомлением. Каждый элемент массива должен содержать:
    • label: Текст кнопки или ссылки;
    • url: Ссылка или onClick: функция для события клика;
    • className (необязательно): Класс для пользовательских стилей кнопки;
    • noDefaultClasses (необязательно): Убирает стандартные стили, если установлено в true;
    • variant: Определяет, будет ли кнопка primary, secondary или link.
  • Обязательный: Нет
  • Тип: Array<NoticeAction>

Простое информационное уведомление

import { Notice } from '@wordpress/components';

const InfoNotice = () => (
    <Notice status="info">
        Важная информация о настройках была обновлена.
    </Notice>
);

Уведомление с кнопкой перехода

import { Notice } from '@wordpress/components';

const SuccessNotice = () => (
    <Notice
        status="success"
        actions={[{
            label: "Посмотреть запись",
            url: "/post/123"
        }]}
    >
        Пост успешно опубликован!
    </Notice>
);

Уведомление об ошибке с кастомным сообщением для озвучивания и функцией удаления

import { Notice } from '@wordpress/components';

const ErrorNotice = ({ onRemove }) => (
    <Notice
        status="error"
        onRemove={onRemove}
        spokenMessage="Ошибка в загрузке данных. Попробуйте позже."
    >
        Произошла ошибка при загрузке данных. Пожалуйста, попробуйте позже.
    </Notice>
);

Предупреждение с несколькими действиями и пользовательским стилем

import { Notice } from '@wordpress/components';

const WarningNotice = () => (
    <Notice
        status="warning"
        actions={[
            {
                label: "Обновить",
                onClick: () => alert("Обновление..."),
                variant: "primary"
            },
            {
                label: "Подробнее",
                url: "/help",
                variant: "link",
                className: "custom-link-style"
            }
        ]}
    >
        Обнаружено несоответствие в данных. Пожалуйста, обновите информацию.
    </Notice>
);

Заключение

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

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg