Документация для разработчиков
Документация для разработчиков Документация по D7 Документация по REST Пользовательская документация
Темная тема

Общее

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

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

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

  1. Основной элемент - обязательный элемент. Имеет базовый класс .ui-ctl который определяет базовые свойства всего контрола. Именно на этот элемент навешиваются все классы-модификаторы.
  2. Основное поле - обязательный элемент. Непосредственно сам контрол. Всегда имеет один класс .ui-ctl-element, но может быть разным тегом (<input>, <select>, <textarea> или <div>).
  3. Дополнительные элементы - опциональные элементы. Предназначены для отображения иконок внутри поля. Их может быть не более 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-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
3
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>
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх