Кнопка и ссылка

Кнопки создают на основе контрола Controls/buttons:Button, спецификацию которого можно найти здесь.

Все кнопки имеют общую компоновку элементов:

  • текст на кнопке, поясняющий её назначение (опционально).
  • иконка (опционально);

Тип кнопки

В опции viewMode можно задать один из следующих типов кнопки:

  • контурная кнопка
  • декорированная ссылка
  • кнопка панели инструментов
  • функциональная кнопка

Кнопка с иконкой двойного действия создаётся с помощью контрола ExtControls/dropdown:ChooseButton.

Стиль кнопки

Стиль кнопки определяется с помощью опции buttonStyle. Стиль может влиять на цвет фона или цвет границы для различных типов кнопок (см. viewMode).

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

Текст на кнопке, поясняющий ее действие, задают с помощью опции caption. В опции можно передать текст, шаблон или разметку.

В следующем примере показано, что в опцию передан текст.

<Controls.buttons:Button caption="Открыть" />

В следующем примере показано, что в опцию передан шаблон. Шаблон необходимо предварительно подключить в массив зависимостей модуля

<Controls.buttons:Button caption="wml!MyComponent/templates/captionTemplate" />
define("MyComponent", ["UI/Base","wml!MyComponent/templates/captionTemplate"],);

В следующем примере показано, что в опцию передана разметка.

<Controls.buttons:Button>
   <ws:caption>
      <span style="{{ _style }}">{{ _caption }}</span>
   </ws:caption>
</Controls.buttons:Button>

Размер надписи

Для изменения размера надписи задают опцию fontSize. Размер шрифта задается константой из стандартного набора размеров шрифта, который определен для текущей темы оформления.

Цвет надписи

Для изменения цвета надписи задают опцию fontColorStyle. Цвет текста задается константой из стандартного набора цветов, который определен для текущей темы оформления.

Иконка кнопки

Символ шрифта иконки

Все иконки — символы специального шрифта иконок. Список всех иконок можно увидеть здесь. Опция icon задает только символ шрифта иконки. Например, icon-1c, icon-AccordionArrowDown или icon-AdminInfo.

В следующем примере показана кнопка с иконкой Add.

<Controls.buttons:Button icon="icon-Add" viewMode="button"/>

Размер иконки

Для изменения размера иконки задают опцию iconSize. Размер иконки задается константой из стандартного набора размеров, который определен для текущей темы оформления.

Цвет иконки

Для изменения цвета иконки предусмотрена опция iconStyle. Цвет иконки задается константой из стандартного набора цветов, который определен для текущей темы оформления.

Высота контурной кнопки

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

Адрес ссылки

С помощью опции href задают гиперссылку, которая будет открыта при клике по кнопке.

<Controls.buttons:Button caption="Перейти в Google" href="https://www.google.ru/"/>

Всплывающая подсказка

Текст всплывающей подсказки задают с помощью опции tooltip. Подсказка помогает уточнить назначение кнопки в случаях, когда:

  • не используется caption;
  • в caption не помещается длинное описание.

Атрибут title добавляется в корневой узел контрола и всплывающая подсказка браузера по умолчанию отображается при наведении курсора мыши.

В следующем примере для кнопки-значка не задана опция caption. Назначение кнопки поясняется по всплывающей подсказке.

<Controls.buttons:Button icon="icon-Add" tooltip="This button allow you to add a new record to the goods list" />

Контрастный фон

Контрастность фона кнопки по отношению к окружению (акцентирование внимания на кнопке) задают с помощью опции contrastBackground.

Событие клика по кнопке

При клике по кнопке происходит событие click. Событие не происходит, если опция readonly установлена в значение true. На событие можно задать обработчик.

В следующем примере представлена обработка клика по кнопке:

<Controls.buttons:Button on:click="clickHandler()"/>
  • JavaScript
clickHandler: function () {
   // Обработчик клика.
}