Перейти к основному содержимому

Notifications

Отображает всплывающее уведомление

Вместо этого компонента может использоваться метод addMessage библиотеки FrontendCore. Примеры использования метода addMessage представлены Вместо этого компонента может использоваться метод addMessage библиотеки FrontendCore. Примеры использования метода addMessage представлены на странице.

/* устарело: */
<Notifications
Value={[{
id:'1',
message: 'Notification ',
timeout: 100
}]}
Mode="TopRight"
ShowDuplicatedTitles={true}
/>
/* новый способ: */
<Button
OnClick={()=>addMessage('Уведомление', { variant: 'warning' }); }
Text={"Уведомление"}
/>
~~~.
~~~jsx
/* устарело: */
<Notifications
Value={[{
id:'1',
message: 'Notification ',
timeout: 100
}]}
Mode="TopRight"
ShowDuplicatedTitles={true}
/>
/* новый способ: */
<Button
OnClick={()=>addMessage('Уведомление', { variant: 'warning' }); }
Text={"Уведомление"}
/>

Свойства

ИмяОписаниеТипЗначение по умолчаниюВозможные значения
CSSМассив строк-классов CSS-стилей компонентаarray
HiddenПризнак состояния компонента Скрытboolean
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
ModeПозиция отображения всплывающего уведомленияenumTopRightTopRight - Вверху справа
TopLeft - Вверху слева
BottomRight - Внизу справа
BottomLeft - Внизу слева
OnClickОбработчик события Clickundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnUnmountОбработчик события Unmountundefined
ShowDuplicatedTitlesПризнак отображения одинаковых уведомленийboolean
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceIdИдентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
ValueMассив уведомлений: объекты вида { id, message, isError, timeout }array
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue

Примеры

JSX:

<Group Mode={"Column"}>
/* устарело: */
<Notifications
Value={[{
id:'1',
message: 'Notification ',
timeout: 100
}]}
Mode="TopRight"
ShowDuplicatedTitles={true}
/>
/* новый способ: */
<Button
OnClick={()=>addMessage('Уведомление', { variant: 'warning' })}
Text={"Уведомление"}
CSS={['mb-32']}
/>
<Link Mode="InternalLink" Value="p/examples/messages/" Text="Подробнее смотрите здесь" />
</Group>