Notification

Компонент группы Overlay, является всплывающим элементом поверх контента.

Быстрый старт​

Используйте комбинацию компонента NotificationsProvider и метода addNotification для вызова компонента Notification.

info

Notifications закрываются автоматически по истечению указанного timeout в миллисекундах или если передан 0 или null то будут висеть бесконечно.

Live Editor
Result
Open in CodeSandbox
info

addNotification возвращает сгенерированный или переданный id, по которому можно закрыть Notification через вызов closeNotification.

import { addNotification, closeNotification } from '@salutejs/plasma-web';

const NotificationID = addNotification({
    id: 'incoming-call',
    title: 'Входящий вызов',
    children: 'Принять?',
    onTimeoutClose: () => {
        console.log("Callback, вызываемый при автоматическом закрытии по timeout.")
    },
}, 3000);


closeNotification(NotificationID);
info

onTimeoutClose - вызывается при автоматическом закрытии по timeout

NotificationsProvider​

tip

frame - с помощью данного свойства можно указать через, id элемента или ref для него, в каком контейнере будет позиционирование(по умолчанию document).

NotificationsProvider может использоваться как в корне приложения или по месту применения в любой части приложения.

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')
);
app.tsx
export function App() {
    return (
        <NotificationsProvider>
                ...
        </NotificationsProvider>
    );
}

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

С помощью свойства placement у компонента NotificationsProvider можно задать позиционирование для Notification.

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

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

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

export function App() {
    return (
        <NotificationsProvider placement="top-right">
            ...
        </NotificationsProvider>
    );
}

Управлением внешним видом​

Регулируется свойством view.

tip

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

//INFO: В данном случае значении цвета будет как во `view='positive'`
addNotification({
    view: 'positive',
    icon: <IconBell color="inherit" size="xs" />,
    ...
}, 3000);

Переопределение цвета у заголовка и контентной части​

Для переопределения значений color текста контента children и заголовка title используйте свойства: titleColor, textColor.

Live Editor
Result
Open in CodeSandbox

Управление шириной уведомления​

Для управления шириной компонента доступны следующие свойства:

  • width — устанавливает ширину компонента.
  • maxWidth — устанавливает максимальную ширину компонента.

Оба свойства принимает любые действительные CSS значения для width и maxWidth

Live Editor
Result
Open in CodeSandbox

Notification props​

Notifications provider props​