Общее

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

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

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

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

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

Основной элемент - обязательный элемент. Имеет базовый класс .ui-ctl который определяет базовые свойства всего контрола. Именно на этот элемент навешиваются все классы-модификаторы.
Основное поле - обязательный элемент. Непосредственно сам контрол. Всегда имеет один класс .ui-ctl-element, но может быть разным тегом (<input>, <select>, <textarea> или <div>).
Дополнительные элементы - опциональные элементы. Предназначены для отображения иконок внутри поля. Их может быть не более 2-х, но обязательно с разными классами. Подробнее об этих элементах.

Если есть необходимость кастомизировать поля по своему макету, используйте собственный класс модификатор на .ui-ctl.

Внимание! Переопределять стили без кастомного класса строго запрещено!

По умолчанию поля имеют базовую высоту в 39px и ширину 320px. В некоторых полях эти значения могут отличаться. Подробнее об этом можно узнать в описании конкретного поля.

Размеры и форма

inline-flex / flex

Одним из дефолтных свойств .ui-ctl является display: flex. Вследствие этого, поле работает как блочный элемент, но растягивается на базовую ширину своего типа. Ширину можно переопределять и сбрасывать. Подробнее об этом тут.

Модификатор .ui-ctl-inline - меняет свойство display на inline-flex, что схоже по свойствам с display: inline-block, т.е. поле начинает вести себя как блочно-строчный элемент.

Модификатор Код

Модификатор	Код
Модификатор `.ui-ctl-inline`	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-inline > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-inline"> <input type="text" class="ui-ctl-element"> </div>
Если есть необходимость изменить свойства в обратном направлении, можно использовать модификатор `.ui-ctl-block`.
Модификатор `.ui-ctl-block`	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-block > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-block"> <input type="text" class="ui-ctl-element"> </div>

Модификатор .ui-ctl-inline

<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-inline > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-inline">
	<input type="text" class="ui-ctl-element">
</div>

Если есть необходимость изменить свойства в обратном направлении, можно использовать модификатор .ui-ctl-block.

Модификатор .ui-ctl-block

<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-block > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-block">
	<input type="text" class="ui-ctl-element">
</div>

Ширина полей

Модификаторы ширины переопределяют базовые значения.

Модификатор	Код
Модификатор `.ui-ctl-w25` - устанавливает ширину в 25%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w25 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w25"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w33` - устанавливает ширину в 33%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w33 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w33"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w50` - устанавливает ширину в 50%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w50 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w50"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w75` - устанавливает ширину в 75%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w75 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w75"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w100` - устанавливает ширину в 100%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w100 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w100"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-wa` - выставляет свойство `width: auto`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wa > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-wa"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-wd` - сбрасывает ширину на дефолтное значение определенного типа.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wd > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-wd"> <input type="text" class="ui-ctl-element">

Высота полей

Модификатор	Код
Модификатор `.ui-ctl-lg` - устанавливает высоту строки в 47px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-lg > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-lg"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-md` - устанавливает высоту строки в 39px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-md > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-md"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-sm` - устанавливает высоту строки в 33px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-sm > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-sm"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-xs` - устанавливает высоту строки в 26px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-xs > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-xs"> <input type="text" class="ui-ctl-element">

Цвет

Модификатор	Код
Модификаторы `.ui-ctl-active`, `.ui-ctl-hover.`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-active > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-active"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-success`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-success > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-success"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-warning`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-warning > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-warning"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-danger`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-danger > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-danger"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-disabled`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-disabled > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-disabled"> <input type="text" class="ui-ctl-element"> <!-- .ui-ctl-container > input.ui-ctl-element[disabled] --> <div class="ui-ctl ui-ctl-textbox"> <input type="text" class="ui-ctl-element" disabled> </div>
Модификатор меняет только оформление поля. Для того, чтобы заблокировать возможность ввода данных, добавьте к `.ui-element` атрибут `disabled`. Атрибут самодостаточен, и его можно использовать без класса, внешний вид поля тоже изменится..

Модификатор	Код
Элемент `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-success` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-success{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-success">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-primary` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-primary{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-primary">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-danger` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-danger{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-danger">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-warning` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-warning{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-warning">новый</div> <input type="text" class="ui-ctl-element"> </div>

Дополнительные свойства полей

Модификатор	Код
Модификатор `.ui-ctl-no-border` убирает границы.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-border > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-no-border"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-underline` убирает все границы, за исключением нижней.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-underline > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-underline"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-no-padding` убирает `padding` в самом поле.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-padding > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-no-padding"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-round` закругляет углы.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-round > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-round"> <input type="text" class="ui-ctl-element"> </div>

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

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

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

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

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

0 Игорь Шевчик 19.08.2024 08:39:01 Сообщение не промодерировано, возможны ошибки и неточности.
.ui-ctl-orange

Vladislav Kh 11.05.2023 04:47:18

Сообщение не промодерировано, возможны ошибки и неточности.

Опечатка в примерах использования тегов.
При указании модификатора типа тега необходимо сохранять основной класс ui-ctl-tag.
Например

Код

<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag.ui-ctl-tag-warning{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag ui-ctl-tag-warning">новый</div>
    <input type="text" class="ui-ctl-element">
</div>

Наверх