Notification

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

Компонент Notification может использоваться для создания собственных систем оповещения. Вид компонента контролируется свойствами (props). Текстовая часть оповещения состоит из title и children. Слева или сверху от нее, также можно пробросить иконку через свойство icon. Также есть часть actions, в которой предполагается отображение кнопок для взаимодействия.

Провайдер контекста

Поместите NotificationsProvider в корень приложения или там, где будете применять модальные окна. В качестве свойств можно указать контейнер для оповещений через frame.

index.ts

import ReactDOM from 'react-dom';
import { NotificationsProvider } from '@salutejs/plasma-web';

import { App } from './App';

ReactDOM.render(
    <NotificationsProvider>
        <App />
    </NotificationsProvider>,
    document.getElementById('root')
);

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

Позиционирование компонента регулируется с помощью свойства placement.

type NotificationPlacement = 'center' | 'top' | 'bottom' | 'right' | 'left';

И производные комбинации, например bottom-left или top-right.

Вызов уведомления

После подключения NotificationsProvider станет возможен вызов функции addNotification, который приведет к отображению оповещения. Функция принимает значения свойств компонента Notification, включая необязательное поле id. И возвращает сгенерированный или переданный id, по которому можно закрыть оповещение через вызов closeNotification. Оповещение закроется автоматически по истечению указанного timeout в миллисекундах или будет висеть вечно, если передан 0 или null.

Live Editor

Result

Open in CodeSandbox

Вид иконки и текста

tip

Чтобы компонент иконки наследовал color от view используйте значение inherit.

<IconBell color="inherit" size="xs" />

Также имеются свойства titleColor, textColor для переопределения color текста контента и заголовка.

Live Editor

Result

Open in CodeSandbox