Документация для разработчиков
Темная тема

Иконки

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

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

\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-icon-search


<!-- .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-icon-calendar


<!-- .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-icon-dots


<!-- .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-icon-phone


<!-- .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-icon-mail


<!-- .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-icon-clock


<!-- .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-icon-angle


<!-- .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-icon-clear


<!-- .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-icon-loader


<!-- .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>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх