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-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

Color

Цвет согласно палитрам дизайн-системы Платформы. Применяется только для режимов Full и Text

Тип: enum

Значение по умолчанию: GRAY

Возможные значения:

YELLOW - Соответствует палитре YELLOW RED - Соответствует палитре RED GREEN - Соответствует палитре GREEN GRAY - Соответствует палитре GRAY ORANGE - Соответствует палитре ORANGE CYAN - Соответствует палитре CYAN INDIGO - Соответствует палитре INDIGO PURPLE - Соответствует палитре PURPLE MAGENTA - Соответствует палитре MAGENTA

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Hidden

Признак состояния компонента Скрыт

Тип: boolean

Hint

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Icon

Псевдоним значка. Применяется только для режима Icon

Тип: enum

Значение по умолчанию: Info

Возможные значения:

Check - Статус успешного выполнения Info - Статус выполнения с дополнительной информацией Warning - Статус выполнения с предупреждением Error - Статус выполнения с ошибкой

IconSize

Размер значка. Применяется только для режима Icon

Тип: enum

Значение по умолчанию: Medium

Возможные значения:

Small - 16x16 px Medium - 24x24 px Large - 32x32 px

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

Mode

Режим отображения статуса

Тип: enum

Значение по умолчанию: Full

Возможные значения:

Full - Полный: содержит обрамленный текст. Текст определяется свойством Text Text - Текстовый: содержит текст с предшествующей точкой. Текст определяется свойством Text Icon - Графический: содержит только значок. Тип значка определяется свойством Icon, а размер - свойством IconSize

OnClick

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyDown

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

Slot

Именованное пространство во фрагменте экранной формы.

Тип: string

Text

Текст статуса. Применяется только для режимов Full и Text

Тип: string

Значение по умолчанию: Текст

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: 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>

Свойства​

Badge​

CSS​

Color​

CombineConfig​

Hidden​

Hint​

Icon​

IconSize​

Id​

Mode​

OnClick​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

Slot​

Text​

Tooltip​

TraceId​

Visible​

Примеры​

Свойства

Badge

CSS

Color

CombineConfig

Hidden

Hint

Icon

IconSize

Id

Mode

OnClick

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

Slot

Text

Tooltip

TraceId

Visible

Примеры