Gravity UI – UIKit

import {Alert} from '@gravity-ui/uikit';

`Theme` (тема)

normal — основная тема (используется по умолчанию).

info — используется для любой стандартной информации.

success — используется для положительной информации.

warning — используется для информации, требующей внимания.

danger — используется для критических ошибок.

utility — используется для полезных советов.

clear — подходит для использования Alert как часть других компонентов (например, в качестве content в Popover)

NormalNormal theme

InfoInfo theme

SuccessSuccess theme

WarningWarning theme

DangerDanger theme

UtilityUtility theme

ClearClear theme

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Alert theme="normal" title="Normal" message="Normal theme" />
            <Alert theme="info" title="Info" message="Info theme" />
            <Alert theme="success" title="Success" message="Success theme" />
            <Alert theme="warning" title="Warning" message="Warning theme" />
            <Alert theme="danger" title="Danger" message="Danger theme" />
            <Alert theme="utility" title="Utility" message="Utility theme" />
            <Alert theme="clear" title="Clear" message="Clear theme" />
        </>
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Alert theme="normal" title="Normal" message="Normal theme" />
            <Alert theme="info" title="Info" message="Info theme" />
            <Alert theme="success" title="Success" message="Success theme" />
            <Alert theme="warning" title="Warning" message="Warning theme" />
            <Alert theme="danger" title="Danger" message="Danger theme" />
            <Alert theme="utility" title="Utility" message="Utility theme" />
            <Alert theme="clear" title="Clear" message="Clear theme" />
        </>
    );
}

`View` (вид)

filled — используется для настройки цвета фона алерта (используется по умолчанию).

outlined — используется для настройки цвета границ алерта.

FilledFilled view

OutlinedOutlined theme

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Alert title="Filled" message="Filled view" view="filled" />
            <Alert title="Outlined" message="Outlined theme" view="outlined" />
        </>
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Alert title="Filled" message="Filled view" view="filled" />
            <Alert title="Outlined" message="Outlined theme" view="outlined" />
        </>
    );
}

`Layout` (расположение)

vertical — используется для привлечения внимания пользователей к контенту, если задано свойство actions с кнопками. Кнопки отображаются под текстом (используется по умолчанию).

horizontal — используется для привлечения внимания пользователей к контенту, если задано свойство actions с кнопками. Кнопки отображаются справа от текста.

VerticalVertical direction

HorizontalHorizontal direction

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Alert
                layout="vertical"
                title="Vertical"
                message="Vertical direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                layout="horizontal"
                title="Horizontal"
                message="Horizontal direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Alert
                layout="vertical"
                title="Vertical"
                message="Vertical direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                layout="horizontal"
                title="Horizontal"
                message="Horizontal direction"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

`Corners` (углы)

rounded — включает скругленные углы окна алерта (используется по умолчанию).

square — включает прямые углы окна алерта.

RoundedRounded corners

SquareSquare corners

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Alert title="Rounded" message="Rounded corners" corners="rounded" />
            <Alert title="Square" message="Square corners" corners="square" />
        </>
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Alert title="Rounded" message="Rounded corners" corners="rounded" />
            <Alert title="Square" message="Square corners" corners="square" />
        </>
    );
}

Заголовок алерта

title — заголовок алерта. Имеет более низкий приоритет, чем у параметра Alert.Title.

some text

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return <Alert title={<Alert.Title className={'some-class'} text="some text" />} />;
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return <Alert title={<Alert.Title className={'some-class'} text="some text" />} />;
}

Сообщение алерта

message — сообщение алерта. Оно должно быть достаточно информативным, чтобы полностью объяснить суть алерта.

`onClose`

onClose — функция обратного вызова, которая срабатывает, когда пользователь нажимает на кнопку закрытия алерта. Если это свойство задано, кнопка закрытия видима.

Alert has closeAlert has close

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <Alert
            onClose={() => alert('Close button pressed')}
            title="Alert has close"
            message="Alert has close"
        />
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <Alert
            onClose={() => alert('Close button pressed')}
            title="Alert has close"
            message="Alert has close"
        />
    );
}

`Align` (выравнивание)

Управляет вертикальным выравниванием содержимого внутри компонента Alert:

baseline — выравнивание по умолчанию.

center — содержимое вертикально центрируется внутри компонента Alert. Может быть полезно, если элементы управления занимают больше пространства, чем текст, или если иконка должна располагаться посередине содержимого.

BaselineBaseline align

CenterCenter align

import {Alert} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Alert
                align="baseline"
                theme="info"
                title="Baseline"
                message="Baseline align"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                align="center"
                theme="info"
                title="Center"
                message="Center align"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

import {Alert} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Alert
                align="baseline"
                theme="info"
                title="Baseline"
                message="Baseline align"
                actions={<Alert.Action>button</Alert.Action>}
            />
            <Alert
                align="center"
                theme="info"
                title="Center"
                message="Center align"
                actions={<Alert.Action>button</Alert.Action>}
            />
        </>
    );
}

Свойства

Имя	Описание	Тип	Значение по умолчанию
theme	Внешний вид алерта.	`"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` `"clear"`	`"normal"`
view	Включает или отключает цвет фона окна алерта.	`"filled"` `"outlined"`	`"filled"`
layout	Используется для привлечения внимания пользователей к контенту, если задано свойство `actions` с кнопками.	`"vertical"` `"horizontal"`	`"vertical"`
corners	Управляет оформлением углов (прямые или скругленные) для окна алерта.	`"rounded"` `"square"`	`"rounded"`
title	Заголовок алерта	`string`
message	Сообщение алерта	`string`
onClose	Функция обратного вызова, которая срабатывает, когда пользователь нажимает на кнопку закрытия алерта.	`Function`
actions	Массив кнопок или пользовательских компонентов.	`React.ReactNode` `"AlertAction"`
align	Управляет вертикальным выравниванием содержимого внутри компонента `Alert`.	`"center"` `"baseline"`	`"baseline"`
style	HTML-атрибут `style`.	`React.CSSProperties`
className	Имя CSS-класса алерта.	`string`
icon	Переопределяет иконку по умолчанию.	`React.ReactNode`
qa	HTML-атрибут `data-qa`, используется для тестирования.	`string`

Alert

§Theme (тема)

§View (вид)

§Layout (расположение)

§Corners (углы)

§Заголовок алерта

§Сообщение алерта

§onClose

§Align (выравнивание)

§Свойства