Типы полей

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

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

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

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

<div class="ui-ctl ui-ctl-textbox"> <!-- 1. Основной контейнер -->
	<input type="text" class="ui-ctl-element">  <!-- 2. Основное поле -->
</div>

1. Основной элемент - на этот контейнер обязательно ставится класс, определяющий тип поля. В данном примере стоит .ui-ctl-textbox.
2. Основное поле - свойства этого элемента напрямую зависят от того, какой класс указан у родителя.

Textbox и Textarea

Textbox

Обычное текстовое поле. Базовая ширина 320px.

<!-- .ui-ctl.ui-ctl-textbox > input[type="text"].ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
	<input type="text" class="ui-ctl-element" placeholder="Название">
</div>

Textarea

Базовая ширина 640px.

<!-- .ui-ctl.ui-ctl-textarea > textarea.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textarea">
	<textarea class="ui-ctl-element"></textarea>
</div>

Dropdown

Базовая ширина 320px.

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-dropdown > 
	div.ui-ctl-after.ui-ctl-icon-angle + 
	div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-dropdown">
	<div class="ui-ctl-after ui-ctl-icon-angle"></div>
	<div class="ui-ctl-element"> Выбранная опция </div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-dropdown > 
	div.ui-ctl-after.ui-ctl-icon-angle + 
	select.ui-ctl > option -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-dropdown">
	<div class="ui-ctl-after ui-ctl-icon-angle"></div>
	<select class="ui-ctl-element">
		<option value="">Опция #1</option>
		<option value="">Опция #2</option>
		<option value="">Опция #3</option>
	</select>
</div>

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

Date & Time

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-datetime > 
	div.ui-ctl-after.ui-ctl-icon-calendar + 
	div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-datetime">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<div class="ui-ctl-element">14.10.2014 16:33</div>
</div>

<!-- .ui-ctl.ui-ctl-ext-after-icon.ui-ctl-datetime > 
	div.ui-ctl-ext-after.ui-ctl-icon-calendar + 
	div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-ext-after-icon ui-ctl-datetime">
	<div class="ui-ctl-ext-after ui-ctl-icon-calendar"></div>
	<div class="ui-ctl-element">14.10.2014 16:33</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-date > 
	div.ui-ctl-after.ui-ctl-icon-calendar + 
	div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-date">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<div class="ui-ctl-element">14.10.2014</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
	div.ui-ctl-after.ui-ctl-icon-clock + 
	div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<div class="ui-ctl-element">14:30</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
	div.ui-ctl-after.ui-ctl-icon-clock + 
	select.ui-ctl-element > n*options-->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<select class="ui-ctl-element">
		<option value="">12:00</option>
		<option value="">15:00</option>
		<option value="">18:00</option>
	</select>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
	div.ui-ctl-after.ui-ctl-icon-clock + 
	select.ui-ctl-element > n*options-->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
	<div class="ui-ctl-after ui-ctl-icon-calendar"></div>
	<input type="text" class="ui-ctl-element" value="14:33">
</div>

MultiSelect

Список на стандартном select с атрибутом multiple.

<!-- .ui-ctl.ui-ctl-multiple-select > select.ui-ctl[multiple][size="n"] > n*option-->
<div class="ui-ctl ui-ctl-multiple-select">
	<select class="ui-ctl-element" multiple size="3">
		<option value="">Опция #1</option>
		<option value="">Опция #2</option>
		<option value="">Опция #3442</option>
		<option value="">Опция #5434</option>
		<option value="">Опция #6433</option>
	</select>
</div>

Ресайз

Если не стоит ни один из модификаторов ресайза, то поле можно ресайзить во всех направлениях.

Запомни! Свойства ресайза не работают ни в одной из версий IE.

Модификатор .ui-ctl-no-resize. Запрещает изменение размера поля.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-no-resize > textarea.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textarea ui-ctl-no-resize">
	<textarea class="ui-ctl-element"></textarea>
</div>

Модификатор .ui-ctl-resize-y. Разрешает ресайз только по вертикали.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-resize-y > textarea.ui-ctl-element -->
<div class="ui-ctl  ui-ctl-textarea ui-ctl-resize-y">
	<textarea class="ui-ctl-element"></textarea>
</div>

Модификатор .ui-ctl-resize-x. Разрешает ресайз только по горизонтали.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-resize-x > textarea.ui-ctl-element -->
<div class="ui-ctl  ui-ctl-textarea ui-ctl-resize-x">
	<textarea class="ui-ctl-element"></textarea>
</div>

Эти классы применимы только для textarea.

Checkbox и Radio

Checkbox

Базовая ширина label равна 320px.

<!-- label.ui-ctl.ui-ctl-checkbox > input[type="checkbox"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-checkbox">
	<input type="checkbox" class="ui-ctl-element">
	<div class="ui-ctl-label-text">Получать информацию о скидках и акциях</div>
</label>

Radio

Базовая ширина label равна 320px.

<!-- label.ui-ctl.ui-ctl-radio > input[type="radio"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-radio">
	<input type="radio" class="ui-ctl-element">
	<div class="ui-ctl-label-text">Получать информацию о скидках и акциях</div>
</label>

File

File Link

<!-- label.ui-ctl.ui-ctl-file-link > input[type="file"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-file-link">
	<input type="file" class="ui-ctl-element">
	<div class="ui-ctl-label-text">Добавить фотографию</div>
</label>

File Button

<!-- label.ui-ctl.ui-ctl-file-btn > input[type="file"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-file-btn">
	<input type="file" class="ui-ctl-element">
	<div class="ui-ctl-label-text">Добавить фотографию</div>
</label>

File Drag'n'Drop

<!-- label.ui-ctl.ui-ctl-file-drop > input[type="file"].ui-ctl-element + .ui-ctl-label-text > span + small -->
<label class="ui-ctl ui-ctl-file-drop">
	<div class="ui-ctl-label-text">
		<span>Загрузить файл или картинку</span>
		<small>Перетащить с помощью drag'n'drop</small>
	</div>
	<input type="file" class="ui-ctl-element">
</label>