Перейти к основному содержимому
Версия: 1.22.3

button

Используйте тег <button>, чтобы добавить кнопку на форму виджета. Поведение этого элемента сходно с React.

По умолчанию, к нажатию на кнопку не привязано никакое событие. Используйте атрибут event-click, чтобы добавить событие по нажатию кнопки.

Доступные атрибуты:

АтрибутТипОбязательноОписание
buttonTypeStringНетУкажите стиль отображения кнопок. Цвета кнопок:
  • primary – синий:
  • approve – зеленый:
  • destructive – красный:
  • secondary – прозрачный фон без рамки:
Используйте следующие типы кнопок вместе с заданным атрибутом svg без текстового заголовка:
  • icon – квадратная кнопка, 32x32 пикселя: icon-mini – квадратная кнопка, выглядит также, как icon, но меньше – 20x20 пикселей:
  • icon-primary – квадратная кнопка с синим фоном, 32x32 пикселя:
  • icon-border – квадратная кнопка с границами, 32x32 пикселя:
Используйте следующие типы кнопок вместе с заданным атрибутом svg и текстовым заголовком:
  • expand – прямоугольная кнопка с голубым фоном:
Если вы не укажете buttonType или укажете значение не из перечисленного выше списка, тип кнопки будет установлен по умолчанию – кнопка с прозрачным фоном и черной рамкой:
disabledBooleanНетУкажите true, чтобы сделать кнопку неактивной. Неактивные кнопки окрашиваются серым и на нее нельзя нажать. Значение по умолчанию: false.
isVisibleBooleanНетУстановите значение false, чтобы скрыть кнопку. Значение по умолчанию: true.
svgStringНетУкажите код SVG файла с заранее декодированным изображением.
hintStringНетЗадайте текстовую подсказку для кнопки.
classStringНетУкажите название класса CSS, определенное в поле CSS виджета.

Пример:

button
<button 
    buttonType="icon" 
    hint="Добавить" 
    svg='<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z" fill="#2E3238"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" fill="#2E3238"/>
    </svg>' 
></button>

Шаблон из примера добавляет кнопку с подсказкой, которая появляется при наведении указателя: