NotificationBox

import { NotificationBox } from '@megafon/ui-shared';

Примеры и код

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

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

<NotificationBox
 type="info"
 title="Info"
 shadowLevel="default"
>
 Уведомление типа info
</NotificationBox>

Выравнивание по центру

Показать код

<NotificationBox
 type="info"
 title="Info"
 shadowLevel="default"
 align="center"
>
 Уведомление типа info
</NotificationBox>

Большое количество текста

Показать код

<NotificationBox
 type="info"
 title="Info"
 shadowLevel="default"
>
 Ширина плашки подстраивается под ширину текста. Максимальный размер плашки 740px, далее текст переносится на другую строку.
</NotificationBox>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; title?: Record<string, string> \| undefined; text?: Record<string, string> \| undefined; link?: Record<string, string> \| undefined; close?: Record<...> \| undefined; button?: Record<...> \| undefined; collapseButton?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на элемент
title	string \| undefined		Заголовок
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; container?: string \| undefined; content?: string \| undefined; link?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
buttonText	string \| undefined		Текст кнопки
onButtonClick	(() => void) \| undefined		Обработчик клика по кнопке
onLinkClick	(() => void) \| undefined		Обработчик клика по ссылке
link	string \| undefined		Текст ссылки внизу уведомления
icon	Element \| undefined		Иконка
href	string \| undefined		href - аргумент тега <a> для ссылки
target	"_self" \| "_blank" \| "_parent" \| "_top" \| undefined		target - аргумент тега <a>
rel	string \| undefined		rel - аргумент тега <a> для ссылки
type	NotificationType \| undefined		Тип отображения
shadowLevel	ShadowType \| undefined		Уровень тени
hasCloseButton	boolean \| undefined		Наличие кнопки-крестика "Закрыть"
shortText	string \| undefined		Короткий текст, отображаемый при закрытом расхлопе
closeCollapseTitle	string \| undefined		заголовок закрытого расхлопа
openCollapseTitle	string \| undefined		заголовок открытого расхлопа
isCollapseOpened	boolean \| undefined		Управление состоянием открыт/закрыт расхлопа "Подробнее"
buttonLoader	boolean \| undefined		Лоадер кнопки
buttonDisable	boolean \| undefined		Заблокировать кнопку
onClose	(() => void) \| undefined		Обработчик на закрытие
onCollapseButtonClick	((value: boolean) => void) \| undefined		Обработчик клика по кнопке расхлопа
align	AlignType \| undefined	left	Горизонтальное выравнивание