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