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

Типы полей

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

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

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

Список на стандартном 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

МодификацияКод

Дата и время


14.10.2014 16:33

Базовая ширина 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>

Дата и время


14.10.2014 16:33

Базовая ширина 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>

Дата


14.10.2014

Базовая ширина 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>

Время


14:30

Базовая ширина 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>


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

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

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

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

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