Кнопка

В этой статье

Кнопка

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

Заметка

На кнопку можно назначить несколько действий. В этом случае при нажатии на кнопку отображается меню со всеми добавленными действиями.

Настройка данных

Чтобы настроить виджет, добавьте одну или несколько кнопок. Для этого нажмите кнопку + Кнопка.

Для кнопки можно указать:

Название
Тип (основная, второстепенная или ссылка)
Цвет кнопки
Цвет текста
Цвет обводки (только для типа Второстепенная)
Действие по клику

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

Чтобы удалить кнопку, нажмите Удалить.

От типа кнопки зависит ее вид на панели.

Настройка отображения

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

Настройка виджета в YAML

Виджет можно редактировать не только в визуальном конструкторе, но и в YAML-редакторе. Чтобы добавить виджет, используйте блок buttons. В таблицах ниже представлены ключи и значения, которые используются для настройки.

Настройки данных в YAML

Ключ	Тип	Определение
name	string	Название
buttonType	enum	Тип кнопки - `primary` — основная - `primary-outlined` — второстепенная - `link` — ссылка
onClick	—	Действие по клику

Настройка цвета в YAML

Чтобы указать цвет кнопки и текста, используйте блок color. В блоке используются ключи и значения, указанные в таблице.

Ключ	Тип	Определение
mode	enum	Режим окрашивания - `AUTO` — авто - `BASE` — базовый
value	string	HEX-код цвета

В блоке borderColor с помощью ключей mode и value указывается цвет обводки для второстепенной кнопки.

Настройки отображения в YAML

Ключ	Тип	Определение
verticalAlign	enum	Вертикальное выравнивание: - `TOP` — сверху - `CENTER` — по центру - `BOTTOM` — снизу
horizontalAlign	enum	Горизонтальное выравнивание: - `LEFT` — слева - `CENTER` — по центру - `RIGHT` — справа - `FILL` — по ширине

Пример настроенного виджета в YAML-редакторе

  - key: button
    apiVersion: "7"
    type: BUTTON
    settings:
      buttons:
        - name: Обновить список магазинов
          onClick:
            - type: UPDATE_VARIABLE
              name: Обновить переменную
              variables:
                - inputMethod: VARIABLE
                  sourceVariable: Магазины
                  name: Магазины
          buttonType: primary
      horizontalAlign: LEFT
      verticalAlign: TOP
      sorting: []

Была ли статья полезна?

Да

Нет

Текст

Сортировка