Типы полей
Подключение и базовый шаблон
Подключается библиотека вызывом расширения:
\Bitrix\Main\UI\Extension::load("ui.forms");
Базовый шаблон
<div class="ui-ctl ui-ctl-textbox"> <!-- 1. Основной контейнер --> <input type="text" class="ui-ctl-element"> <!-- 2. Основное поле --> </div>
- Основной элемент - на этот контейнер обязательно ставится класс, определяющий тип поля. В данном примере стоит
.ui-ctl-textbox
. - Основное поле - свойства этого элемента напрямую зависят от того, какой класс указан у родителя.
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> |
Список на стандартном select |
<!-- .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
Модификация | Код |
---|---|
Дата и время Базовая ширина 125px. |
<!-- .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> |
Дата и время Базовая ширина 125px. |
<!-- .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> |
Дата Базовая ширина 80px. |
<!-- .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> |
Время Базовая ширина 45px. |
<!-- .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-element . Например, поставить стандартный или текстовый , как в примерах ниже: | |
<!-- .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>