Status
Акцентирует внимание на определенном типе информации
Используется для акцентирования внимания на определенном типе информации. Имеет следующие режимы работы:
- Full. Содержит обрамленный текст. Текст определяется свойством Text
- Text. Содержит текст с предшествующей точкой. Текст определяется свойством Text
- Icon. Содержит только значок. Тип значка определяется свойством Icon, а размер - свойством IconSize
<Status
Mode="Icon"
Icon="Check"
IconSize="Small"
/>
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возможные значения |
|---|---|---|---|---|
| Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
| CSS | Массив строк-классов CSS-стилей компонента | array | ||
| Color | Цвет согласно палитрам дизайн-системы Платформы. Применяется только для режимов Full и Text | enum | GRAY | YELLOW - Соответствует палитре YELLOWRED - Соответствует палитре REDGREEN - Соответствует палитре GREENGRAY - Соответствует палитре GRAYORANGE - Соответствует палитре ORANGECYAN - Соответствует палитре CYANINDIGO - Соответствует палитре INDIGOPURPLE - Соответствует палитре PURPLEMAGENTA - Соответствует палитре MAGENTA |
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
| Icon | Псевдоним значка. Применяется только для режима Icon | enum | Info | Check - Статус успешного выполненияInfo - Статус выполнения с дополнительной информациейWarning - Статус выполнения с предупреждениемError - Статус выполнения с ошибкой |
| IconSize | Размер значка. Применяется только для режима Icon | enum | Medium | Small - 16x16 pxMedium - 24x24 pxLarge - 32x32 px |
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| Mode | Режим отображения статуса | enum | Full | Full - Полный: содержит обрамленный текст. Текст определяется свойством TextText - Текстовый: содержит текст с предшествующей точкой. Текст определяется свойством TextIcon - Графический: содержит только значок. Тип значка определяется свойством Icon, а размер - свойством IconSize |
| OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
| OnKeyDown | Обработчик события KeyDown | undefined | ||
| OnKeyUp | Обработчик события KeyUp | undefined | ||
| OnMouseDown | Обработчик события MouseDown | undefined | ||
| OnMouseEnter | Обработчик события MouseEnter | undefined | ||
| OnMouseLeave | Обработчик события MouseLeave | undefined | ||
| OnMouseMove | Обработчик события MouseMove | undefined | ||
| OnMouseOut | Обработчик события MouseOut | undefined | ||
| OnMouseOver | Обработчик события MouseOver | undefined | ||
| OnMouseUp | Обработчик события MouseUp | undefined | ||
| OnUnmount | Обработчик события Unmount | undefined | ||
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| Text | Текст статуса. Применяется только для режимов Full и Text | string | Текст | |
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фра гмента кода по изменению состояния компонента | string | ||
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True |
Примеры
JSX:
<Group Mode="Column" CSS={['px-16']}>
<Group Mode="Row" Height="350px" Width="500px">
<Group Mode="Column" Width="400px">
<Text Mode="Medium_32" Value="Виды" CSS={['my-8']}/>
<Text Mode="Medium_20" Value="Full" CSS={['my-8']}/>
<Text Mode="Regular_14" Value="Содержит обрамленный текст. Текст определяется свойством Text" CSS={['my-8']}/>
<Text Mode="Medium_20" Value="Text" CSS={['my-8']}/>
<Text Mode="Regular_14" Value="Содержит текст с предшествующей точкой. Текст определяется свойством Text" CSS={['my-8']}/>
<Text Mode="Medium_20" Value="Icon" CSS={['my-8']}/>
<Text Mode="Regular_14" Value="Содержит только значок. Тип значка определяется свойством Icon, а размер - свойством IconSize" CSS={['my-8']}/>
</Group>
<Group Mode="Column" Height="350px">
<Group CSS={['mt-96']} Height="auto">
<Status
Mode="Full"
Text="Выполнено"
Color="GREEN"
/>
</Group>
<Group CSS={['mt-64']} Height="auto">
<Status
Mode="Text"
Text="Выполнено"
Color="GREEN"
/>
</Group>
<Group Mode="Row" CSS={['mt-80']} Height="auto" VerticalAlign="Center">
<Group CSS={['mx-4']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Small"
/>
</Group>
<Group CSS={['mx-4']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Medium"
/>
</Group>
<Group CSS={['mx-4']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Large"
/>
</Group>
</Group>
</Group>
</Group>
<Group Mode="Column" Height="550px" Width="500px">
<Group Mode="Column" Height="auto" Width="400px">
<Text Mode="Medium_32" Value="Состояния" CSS={['my-8']}/>
<Text Mode="Regular_14" Value="Цвет, используемый для обозначения статуса. Например, зеленый, обозначающий статус успешного выполнения" CSS={['my-8']}/>
</Group>
<Group Mode="Row" Height="auto" Align="Space-between">
<Group Mode="Column" Height="auto" Width="150px">
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Выполнено"
Color="GREEN"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Назначено"
Color="YELLOW"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Отклонено"
Color="RED"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Отменено"
Color="GRAY"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Передано"
Color="PURPLE"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Возвращено"
Color="MAGENTA"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Отослано"
Color="CYAN"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Отправлено"
Color="ORANGE"
/>
</Group>
<Group CSS={['my-4']}>
<Status
Mode="Full"
Text="Переведено"
Color="INDIGO"
/>
</Group>
</Group>
<Group Mode="Column" Height="auto" Width="150px">
<Group CSS={['my-12']}>
<Status
Mode="Text"
Text="Выполнено"
Color="GREEN"
/>
</Group>
<Group CSS={['my-12']}>
<Status
Mode="Text"
Text="Назначено"
Color="YELLOW"
/>
</Group>
<Group CSS={['my-16']}>
<Status
Mode="Text"
Text="Отклонено"
Color="RED"
/>
</Group>
<Group CSS={['my-8']}>
<Status
Mode="Text"
Text="Отменено"
Color="GRAY"
/>
</Group>
<Group CSS={['my-16']}>
<Status
Mode="Text"
Text="Передано"
Color="PURPLE"
/>
</Group>
<Group CSS={['my-12']}>
<Status
Mode="Text"
Text="Возвращено"
Color="MAGENTA"
/>
</Group>
<Group CSS={['my-12']}>
<Status
Mode="Text"
Text="Отослано"
Color="CYAN"
/>
</Group>
<Group CSS={['my-16']}>
<Status
Mode="Text"
Text="Отправлено"
Color="ORANGE"
/>
</Group>
<Group CSS={['my-12']}>
<Status
Mode="Text"
Text="Переведено"
Color="INDIGO"
/>
</Group>
</Group>
<Group Mode="Column" Height="auto" Align="Center" Width="auto">
<Group CSS={['mt-12']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Small"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Medium"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Check"
IconSize="Large"
/>
</Group>
</Group>
<Group Mode="Column" Height="auto" Align="Center" Width="auto" CSS={['ml-12']}>
<Group CSS={['mt-12']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Info"
IconSize="Small"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Info"
IconSize="Medium"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Info"
IconSize="Large"
/>
</Group>
</Group>
<Group Mode="Column" Height="auto" Align="Center" Width="auto" CSS={['ml-12']}>
<Group CSS={['mt-12']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Warning"
IconSize="Small"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Warning"
IconSize="Medium"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Warning"
IconSize="Large"
/>
</Group>
</Group>
<Group Mode="Column" Height="auto" Align="Center" Width="auto" CSS={['ml-12']}>
<Group CSS={['mt-12']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Error"
IconSize="Small"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Error"
IconSize="Medium"
/>
</Group>
<Group CSS={['mt-16']} Width="auto" Height="auto">
<Status
Mode="Icon"
Icon="Error"
IconSize="Large"
/>
</Group>
</Group>
</Group>
</Group>
</Group>