FA-Picker

NikitOS

Developer
Joined
May 21, 2018
Messages
31
Базовое использование
HTML:
<xf:macro name="tc_clib_fa_picker_macros::fa_picker"
          arg-name="icon" arg-value="far fa-gavel"
          arg-row="true" />
1630694784907.png

Список аргументов tc_clib_fa_picker_macros::fa_picker
АргументЗначение по умолчаниюОписание
nameЗначение атрибута name поля формы.
valueЗначение атрибута rowtype для xf:formrow.
requiredfalseЗначение атрибута required поля формы.
readonlyfalseЗначение атрибута readonly поля формы.
disabledfalseЗначение атрибута disabled поля формы.
controlIdЗначение атрибута id поля формы.
rowtrueОтображение поля выбора иконки в xf:formrow.
labelЗначение атрибута label для xf:formrow.
hintЗначение атрибута hint для xf:formrow.
explainЗначение атрибута explain для xf:formrow.
htmlЗначение атрибута html для xf:formrow.
rowclassЗначение атрибута rowclass для xf:formrow.
rowtypeЗначение атрибута controlid для xf:formrow.
boxBeforeInputfalseЕсли true, предпросмотр иконки будет отображаться слева от поля ввода.
triggerInputfalseЕсли true, двойное нажатие по полю ввода будет открывать меню выбора иконки.
noBoxfalseЕсли true, блок предпросмотра иконки не будет отображаться, а меню будет открываться двойным кликом по полю ввода.

Параметры TeslaCloud.FontAwesomePicker (tc-fa-picker)
ПараметрЗначение по умолчаниюОписание
faIconInput| .inputСелектор поля ввода класса иконки.
box| .js-faPickerBoxСелектор блока предпросмотра иконки.
trigger| .js-faPickerTriggerСелектор триггеров меню выбора иконок.
triggerInputfalseЕсли true, двойное нажатие по полю ввода будет открывать меню выбора иконки.
noBoxfalseЕсли true, блок предпросмотра иконки не будет отображаться, а меню будет открываться двойным кликом по полю ввода.

Открытие меню пользовательскими триггерами
Для добавления пользовательского триггера, необходимо добавить к элементу класс js-faPickerTrigger.
Пример использования кнопки в качестве триггера:
HTML:
<xf:macro name="tc_clib_fa_picker_macros::fa_picker_head" />

<xf:css src="public:tc_clib_fa_picker.less" />
<xf:js src="TC/ComponentLibrary/fa_picker.js" addon="TC/ComponentLibrary" min="1" />

<xf:formrow>
   <div class="inputGroup tc-fa-picker" data-xf-init="tc-fa-picker">
      <xf:button fa="fa-search" class="js-faPickerTrigger">Choose icon</xf:button>

      <xf:textbox name="test" dir="ltr" />
   </div>
</xf:formrow>
1630695012665.png
 
Top