Иконки

Подключение и базовый шаблон

Подключается библиотека вызывом расширения:

\Bitrix\Main\UI\Extension::load("ui.forms"); 

Базовый шаблон

<div class="ui-ctl ui-ctl-textbox ui-ctl-before-icon ui-ctl-after-icon"> <!-- 1. Модификаторы .ui-ctl-before-icon и .ui-ctl-after-icon -->
	<div class="ui-ctl-before ui-ctl-icon-search"></div> <!-- 2. Дополнительный элемент слева .ui-ctl-before-->
	<button class="ui-ctl-after ui-ctl-icon-clear"></button> <!-- 2. Дополнительный элемент справа .ui-ctl-after -->
		<input type="text" class="ui-ctl-element"> 
</div>

Для добавления иконки нужно выполнить несколько условий:

1. Необходимо определить, с какой из сторон поля будет отображаться иконка. Это можно сделать с помощью одного из двух модификаторов:

   .ui-ctl-before-icon - определяет положение иконки слева;

   .ui-ctl-after-icon - определяет положение иконки справа;

   .ui-ctl-ext-before-icon - определяет положение иконки слева за пределами поля;

   .ui-ctl-ext-after-icon - определяет положение иконки справа за пределами поля.

   Модификатор необходимо повесить на .ui-ctl.

2. Рядом с .ui-ctl-element нужно положить контейнер иконки с классом .ui-ctl-after и/или .ui-ctl-before. Обратите внимание, что часть названия класса *-after-* и/или *-before-* должна соответствовать аналогичному модификатору у родителя (пункт 1).
3. Если необходимо разместить иконку за пределами поля, используйте суффикс '-ext-' в классах для родителя и для самой иконки.
4. К контейнеру с иконкой добавить класс из доступных в этом списке.

Примеры шаблона

<!-- .ui-ctl.ui-ctl-after-icon > div.ui-ctl-after.ui-ctl-icon-search + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-search"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon > div.ui-ctl-after.ui-ctl-icon-search + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon">
	<div class="ui-ctl-after ui-ctl-icon-search"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon.ui-ctl-after-icon > 
	div.ui-ctl-before.ui-ctl-icon-search + 
        div.ui-ctl-after.ui-ctl-icon-angle + 
        input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon ui-ctl-after-icon">
	<div class="ui-ctl-before ui-ctl-icon-search"></div>
	<div class="ui-ctl-after ui-ctl-icon-clear"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon.ui-ctl-ext-after-icon > 
	div.ui-ctl-before.ui-ctl-icon-search + 
        div.ui-ctl-after.ui-ctl-icon-angle + 
	input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon  ui-ctl-ext-after-icon">
	<div class="ui-ctl-before ui-ctl-icon-search"></div>
	<div class="ui-ctl-ext-after ui-ctl-icon-loader"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

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

Часто требуется, чтобы иконка в поле была кнопкой. Например, в поле поиска. Для этого достаточно переименовать тег с иконкой в <button>, либо добавить модификатор .ui-ctl-icon-btn.

<!-- .ui-ctl.ui-ctl-after-icon > 
	div.ui-ctl-after.ui-ctl-icon-search.ui-ctl-icon-btn + 
	input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-btn ui-ctl-icon-search"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > 
	button.ui-ctl-after.ui-ctl-icon-search + 
	input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
	<button class="ui-ctl-after ui-ctl-icon-search"></button>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

Список иконок

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-search + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-search"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-calendar + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-dots + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-dots"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-phone + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-phone"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-mail + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-mail"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-clock + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-clock"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-angle + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-angle"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-clear + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-clear"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-loader + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
	<div class="ui-ctl-after ui-ctl-icon-loader"></div>
	<input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>