Button

Отображает кнопку

Согласно дизайн-системе Платформы и в зависимости от выполняемой функции имеет несколько режимов работы
и вариантов стилизации.

  <Button
    Text="Primary" 
    Style="Primary" 
  />

Свойства

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

CombineConfig

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

Тип: object

Disabled

Признак состояния компонента Отключен

Тип: boolean

FullWidth

Признак автоматически назначаемой ширины кнопки согласно ширине родительского компонента

Тип: boolean

Hidden

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

Тип: boolean

Hint

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

Тип: any

Id

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

Тип: string

Mode

Режим работы кнопки

Тип: enum

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

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

Button - По нажатию кнопки происходят только действия, описываемые в обработчике события Reset - По нажатию кнопки введенные на странице данные очищаются, и страница перезагружается Submit - По нажатию кнопки данные на странице отправляются на сервер, и страница перезагружается

OnClick

Обработчик события MouseClick

Тип: 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={() => {h // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount

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

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

Тип: undefined

Slot

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

Тип: string

Style

Стиль кнопки согласно дизайн-системе Платформы

Тип: enum

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

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

Primary - Используется для кнопки, выполняющей основное, ожидаемое, наиболее вероятное действие, например, Сохранить, Добавить, Применить. На экранной форме приложения обычно используется единожды.

Secondary - Используется при наличии нескольких равновероятных или равнозначных действий. На экранной форме приложения и может использоваться более одного раза.

PrimaryGray - Используется для кнопки, выполняющей основное, ожидаемое, наиболее вероятное действие, например, Сохранить, Добавить, Применить. На экранной форме приложения обычно используется единожды.

Tertiary - Используется для кнопки, выполняющей дополнительное, менее приоритетное действие, чем действие, выполняемое по кнопке со стилем Primary, например, Отменить.

PrimaryError - Используется для кнопки, выполняющей наиболее ожидаемое, приоритетное деструктивное действие на экранной форме приложения, например, Удалить.

SecondaryError - Используется при наличии нескольких равновероятных или равнозначных деструктивных действий. На экранной форме приложения может использоваться более одного раза.

TertiaryError - Используется для кнопки, выполняющей деструктивное действие. Может использоваться вместо стиля Secondary Red.

SecondaryGray - Используется по умолчанию при наличии нескольких действий с равным приоритетом, например, для кнопок на панели инструментов.

TertiaryGray - Используется вместо стиля Secondary Gray, например, для кнопки рядом с кнопкой в стиле Primary — Отменить.

Text

Надпись на кнопке

Тип: string

Tooltip

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

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Visible

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

Тип: boolean

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

Примеры

JSX:

<Group Mode="Column" Height="150px">
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Text" Mode="Medium_14" CSS={['ml-8']} />
      <Button
        CSS={['m-8']} 
        Text="Сохранить" 
        Style="Primary"
      />
    </Group>
    
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Text+Icon" CSS={['ml-8']} />
      <Button
        Hint="best hint ever"
        CSS={['m-8']} 
        Text="Сохранить" 
        Style="Primary"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Icon" CSS={['ml-8']} />
      <Button
        Tooltip="Кнопка сохранить…"
        CSS={['m-8']}  Style="Primary">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryError"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        Hint={{  position: 'topRight', value: "Все говорят, что я Tooltip, но я идентифицирую себя, как Hint."  }}
        CSS={['m-8']}  Style="PrimaryError">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        Hint={{  position: 'topRight', value: "Все говорят, что я Tooltip, но я идентифицирую себя, как Hint."  }}
        CSS={['m-8']}  Style="PrimaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Secondary"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Secondary"
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Secondary">
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="SecondaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="SecondaryError"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="SecondaryError">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="SecondaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="SecondaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="SecondaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Tertiary"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Tertiary"
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Tertiary">
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="TertiaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="TertiaryError"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="TertiaryError">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="TertiaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="TertiaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="TertiaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Primary"
        Disabled={true}
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Primary"
        Disabled={true}
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Primary" Disabled={true}>
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
</Group>