Элементы интерфейса

Alert:

Компонент:

<Alert background={Background.success}>Какой-то текст... бла, бла, бла...</Alert>

Параметры (пропсы):

• background - Цвет фона

Переменные CSS:

--alert-primary-bg-color: rgba(67, 170, 139, 1); --alert-primary-border-color: rgb(58, 149, 122); --alert-success-bg-color: rgba(144, 190, 109, 1); --alert-success-border-color: rgb(128, 170, 96); --alert-warning-bg-color: rgba(249, 199, 79, 1); --alert-warning-border-color: rgb(181, 144, 56); --alert-danger-bg-color: rgba(249, 65, 68, 1); --alert-danger-border-color: rgb(184, 47, 49); --alert-font-color: white;

---

Toast:

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

• Необходимо объявить провайдер в App.tsx или Main.tsx

<ToastProvider position={HorizontalPosition.left}>Components</ToastProvider>

• С помощью функции addToast из хука useToast() выводите новые уведомления

const {addToast} = useToast();

<Button bg={ButtonBackground.primary} onClick={() => addToast({ label: "Уведомление для уведомления", description: "Уведомляю о бла бла бла бла", bg: ToastBackground.success })}> Show toast </Button>

Параметры (пропсы):

• position - Сторона на которой будут отображаться Toast (ToastProvider)
• label - Заголовок (Функция addToast)
• description - Описание (Функция addToast)
• bg - Цвет (Функция addToast)
• time - Время показа (Функция addToast)

Переменные CSS:

--toast-primary-bg-color: #43AA8B; --toast-primary-font-color: white; --toast-success-bg-color: #90BE6D; --toast-success-font-color: white; --toast-warning-bg-color: #F9C74F; --toast-warning-font-color: white; --toast-danger-bg-color: #F94144; --toast-danger-font-color: white;

TopMenu:

Компонент:

<TopMenu></TopMenu> - Контейнер для меню

<TopMenuDropdownItem title="Аккаунт"></TopMenuDropdownItem> - Контейнер для выпадающего меню (Вложен в TopMenu контейнер)

<TopMenuItem title="Элемент меню"/> - Элемент меню (Вложен в TopMenu или TopMenuDropdownItem )

Переменные CSS:

--horizontal-menu-bg-color: #277DA1; --horizontal-menu-font-color: white;

---

VerticalMenu:

Компонент:

<VerticalMenu></VerticalMenu> - Контейнер меню

<VerticalMenuItem>Элемент меню</VerticalMenuItem> - Элемент меню (Вложен в VerticalMenu)

Параметры (пропсы):

• background - Цвет фона

Переменные CSS:

--vertical-menu-bg-color: rgba(255, 255, 255, 1); --vertical-menu-item-border-color: rgb(195, 195, 195); --vertical-menu-item-hover-bg-color: rgb(228, 228, 228);

---