Поля ввода
Компоненты ввода и вывода в полях виджета.
Библиотека компонентов
http://n2oapp.net/framework/config/schema/control-3.0
#
Базовые свойстваАтрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
id | Строка | Идентификатор поля | |
help | Строка | Подсказка по полю | |
label | Строка | Заголовок поля | Из наименования соответствующего поля выборки виджета |
label-class | Строка | Класс для заголовка поля | |
no-label | true false | Не отображать заголовок | false |
no-label-block | true false | Не отображать блок с заголовком | false |
src | React компонент | Реализация компонента | |
class | Строка | CSS класс стилей | |
style | CSS свойство | Стиль поля | |
placeholder | Строка | Подсказка для ввода | |
required | true false | Обязательность поля. Поддерживаются плейсхолдеры условия. | false |
visible | true false | Видимость поля. Поддерживаются плейсхолдеры условия. | true |
readonly | true false | Преобразование компонента только для чтения | false |
enabled | true false | Доступность поля. Поддерживаются плейсхолдеры условия. | true |
description | Строка | Описание поля | |
copied | true false | Копируется ли это поле при upload="copy" | false |
depends-on | Строка | Зависимость от полей | |
param | Строка | Параметр в URL для значение по умолчанию | |
ref-model | Тип действия Redux | Ссылка на модель, в которой будет инициализация значения | resolve |
ref-page | this parent | Ссылка на страницу, в которой будет инициализация значения | this |
ref-datasource | Сссылка на источник данных | Ссылка на источник данных, в котором будет инициализация значения | Для ref-page=this источник данных текущего виджета, для ref-page=parent источник данных виджета, из под которого открыта текущая страница. |
ref-field-id | Строка | Ссылка на поле, для инициализация значения |
#
<dependencies>Зависимости компонента
Пример
<input-text id="name"> <dependencies> ... </dependencies></input-text>
#
<enabling>Условие доступности
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит условие доступности | Вычисляется по условию |
Тело
Java Script выражение
Пример
<dependencies> <enabling on="type">type.id == 1</enabling> <!-- Поле доступно, если type.id равен 1 --></dependencies>
#
<visibility>Условие видимости
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит условие видимости | Вычисляется по условию |
reset | true false | Сбросить значение при скрытии | false |
Тело
Java Script выражение
Пример
<dependencies> <visibility on="type" reset="true">type.id == 1</visibility> <!-- Поле видимо, если type.id равен 1 --></dependencies>
#
<reset>Сброс значения
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит условие сброса | Вычисляется по условию |
Тело
Java Script выражение
Пример
<dependencies> <reset on="type">type.id == 1</reset> <!-- Сбросить значение, если type.id равен 1 --></dependencies>
#
<fetch-value>Обновление модели поля ввода
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит условие видимости | Вычисляется по условию |
query-id | Строка | Запрос за данными | |
value-field-id | Строка | Поле выборки, значение которого будет проставлено в модель поля ввода | name |
size | Число | Количество возвращаемых записей |
Тело
Список префильтров
Пример
<dependencies> <fetch-value on="type" query-id="queryId" value-field-id="name" size="10"> <pre-filters> ... </pre-filters> </fetch-value> <!-- При изменении поля type будет выполнен запрос за данными и значение name будет проставлено в текущее поле --></dependencies>
#
<fetch>Обновление модели компонента при изменении зависимых полей. Нужен для списковых компонентов с открытым списком (radio-group, checkbox-group), у которых есть фильтры от других полей
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит установка значений | Вычисляется по условию |
apply-on-init | true false | Срабатывает ли при инициализации виджета? | true |
Пример
<dependencies> <fetch on="type"/> <!-- При изменении поля type будет выполнен запрос за данными и списковый компонент отобразит обновленные варианты --></dependencies>
#
<set-value>Условие установки значений
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
on | Строка | Поля, от которых зависит установка значений | Вычисляется по условию |
apply-on-init | true false | Срабатывает ли при инициализации виджета? | true |
Тело
Java Script тело функции
Пример
<dependencies> <set-value on="type"> if (type.id == 1) return "Test"; </set-value> <!-- Поле заполнится значением "Test", если type.id равен 1 --></dependencies>
#
<mandatory>Условие обязательности заполнения
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
field-id | Строка | Поле, которое должно быть заполнено |
Тело
Java Script выражение
Пример
<dependencies> <requiring on="type">type.id == 1</requiring> <!-- Поле обязательно для заполнения, если type.id равен 1 --></dependencies>
#
<validations>Валидации компонента
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
white-list | Список идентификаторов через запятую | Валидации объекта, сообщения которых будут показаны под этим полем |
Пример
<validations white-list="checkUniqueName, checkAdult"> ...</validations>
Тело
#
<submit>Действие обновления компонента
#
<toolbar>Панель действий компонента
Тело
Пример
<input-text> <toolbar> ... </toolbar></input-text>
#
Простые компонентыБазовые свойства простых компонентов:
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
default-value | Строка | Значение по умолчанию простого компонента |
#
<input-text>Компонент ввода однострочного текста или чисел
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
domain | string, integer, numeric, byte, short | Тип данных | |
precision | Число | Максимальная длина дробной части (используется только для domain="numeric") | 8 |
length | Число | Максимальное количество символов в тексте (используется только для domain="string") | |
max | Число | Максимальное допустимое число (используется только для числовых domain) | |
min | Число | Минимальное допустимое число (используется только для числовых domain) | |
step | Строка | Шаг инкремента / декремента чисел (используется только для числовых domain). Если step="0", то кнопки "вверх вниз" будут отсутствовать | Для domain целых чисел step="1", для domain numeric step="0.01" |
measure | Строка | Единица измерения |
Пример
<input-text id="name" length="10" domain="string"/>
#
<auto-complete>Компонент ввода текста с автоподбором
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
placeholder | Строка | Подсказка для ввода | |
query-id | Строка | Идентификатор запроса за данными для автоподбора | |
value-field-id | Строка | Идентификатор поля выборки, отображаемого в автоподборе | name |
search-filter-id | Строка | Идентификатор фильтра, используемого для поиска | name |
tags | true false | Отображение выбранных элементов тегами | false |
max-tag-text-length | Число | Максимальная длина текста элемента | 10 |
Тело
Пример
<auto-complete query-id="labels" value-field-id="surname" search-filter-id="surnameLike" tags="true"/>
#
<input-money>Компонент ввода денежных единиц
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
suffix | Строка | Суффикс | |
prefix | Строка | Префикс | |
thousands-separator | Строка | Знак, отделяющий группу из трех разрядов | |
decimal-separator | Строка | Знак, отделяющий дробную часть | |
integer-limit | Число | Ограничение по количеству знаков целой части | |
fraction-formatting | off, manual, auto | Форматирование дробной части | off |
Пример
<input-money id="money" prefix="$" thousands-separator=" " decimal-separator="," integer-limit="100" fraction-formatting="manual"></input-money>
#
<password>Компонент ввода пароля
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
eye | true false | Отображать кнопку "Показать пароль" или нет | true |
Пример
<password id="password" eye="true"/>
#
<output-text>Компонент вывода однострочного текста
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
icon | Строка | Иконка | |
type | icon iconAndText | Иконка с текстом или без | |
format | Строка | Формат выводимого текста | |
position | left right | Расположение иконки относительно текста |
Пример
<output-text id="text" icon="fa fa-plus" position="left" type="iconAndText" format="number 0,0.00"/>
#
<output-list>Компонент вывода многострочного текста. В случае, если в данных приходит ссылка, текст будет отображаться как ссылка.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
label-field-id | Строка | Поле выборки, содержащее значение элемента | name |
href-field-id | Строка | Поле выборки, содержащее ссылку элемента | href |
target | newWindow self application | Способ открытия ссылок | newWindow |
separator | Строка | Разделитель между элементами | пробел |
direction | row column | Направление отображения элементов (в строку или в столбец). | column |
Пример
<output-list id="list" label-field-id="label" href-field-id="link" target="application" direction="row" separator=","/>
#
<image>Компонент вывода изображения
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
url | Строка | URL адрес изображения | |
data | Строка | Изображение в байтах | |
title | Строка | Заголовок | |
description | Строка | Подзаголовок | |
shape | rounded, circle, square | Тип формы изображения | rounded |
text-position | top, left, right, bottom | Расположение текста относительно картинки | right |
width | Строка | Ширина картинки | |
action-id | Строка | Ссылка на действие, которое необходимо выполнить при клике на картинку |
Пример
<image url="/myimage.png" title="Заголовок" description="Подзаголовок"> <statuses> <status/> ... <status/> </statuses></image>
#
<statuses>Список статусов.
#
<status>Элемент статуса.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
Src | React компонент | Реализация статуса | Status |
field-id | Строка | Поле с данными для статуса | |
icon | Строка | Иконка статуса | |
place | topLeft, topRight, bottomLeft, bottomRight | Расположение статуса | topLeft |
Пример
<statusfield-id="status"icon="{icon}"place="topLeft"/>
#
<masked-input>Компонент ввода текста с маской
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
mask | Строка | Маска текста | |
measure | Строка | Единица измерения | |
clear-on-blur | true false | Стирать ли значение при смене фокуса | true |
Пример
<masked-input id="phone" mask="+7 (999) 999-99-99"/>
#
<number-picker>Компонент выбора числа из диапазона
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
min | Число | Минимальное значение | 0 |
max | Число | Максимальное значение | 100 |
step | Число | Шаг изменения значения | 1 |
Пример
<number-picker id="count" min="2" max="10"/>
#
<checkbox>Компонент ввода флажок
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
unchecked | null или false | Значение, которое будет отправляться, если чекбокс не отмечен. | null |
Пример
<checkbox id="vip" unchecked="false"/>
#
<date-time>Компонент ввода даты и времени
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
date-format | DD.MM.YYYY DD/MM/YYYY | Формат отображения даты | DD.MM.YYYY |
time-format | HH:mm HH:mm:ss | Формат отображения времени | |
min | Строка | Минимальная дата возможная для выбора | |
max | Строка | Максимальная дата возможная для выбора | |
utc | true false | Всемирное координированное время | false |
Пример
<date-time id="date" date-format="DD.MM.YYYY" min="2018-01-01T08:00:00Z" utc="true"/>
#
<time-picker>Компонент ввода времени
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
prefix | Строка | Префикс | |
mode | "hours,minutes,seconds"; "hours,minutes"; "hours"; "minutes" | Режим отображения списка выбора | hours,minutes,seconds |
time-format | Строка | Формат времени | HH:mm:ss |
format | digit symbols | Формат отображения времени, digit ("00:00:00") или symbols ("15 мин") | symbols |
default-value | Время | Значение по умолчанию |
Пример
<time-picker id="test1" prefix="from: " format="digit" mode="hours,minutes" time-format="hh:mm"/>
#
<file-upload>Компонент загрузки файлов
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
multi | true false | Поддержка загрузки нескольких файлов | false |
ajax | true false | Поддержка загрузки через ajax запрос | true |
upload-url | Строка | URL загрузки файла | |
delete-url | Строка | URL удаления файла | |
value-field-id | Ссылка на поле | Поле выборки, содержащее идентификатор файла | |
label-field-id | Ссылка на поле | Поле выборки, содержащее наименование файла | |
message-field-id | Ссылка на поле | Поле выборки, содержащее сообщение файла | |
url-field-id | Ссылка на поле | Поле выборки, содержащее URL скачивания файла | |
request-param | Строка | Наименование поля в запросе miltipart form data | |
show-size | true false | Отображение размера файла | true |
accept | Строка | Доступные расширения файлов (через запятую) |
Пример
<file-upload id="file" label="Загрузить файл" class="custom-class" multi="true" ajax="true" upload-url="/n2o/data" delete-url="/files/delete/{file.id}" value-field-id="hash" label-field-id="filename" url-field-id="url" show-size="true" accept=".img,.png"/>
#
<image-upload>Компонент загрузки изображений
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
multi | true false | Поддержка загрузки нескольких файлов | false |
ajax | true false | Поддержка загрузки через ajax запрос | true |
upload-url | Строка | URL загрузки файла | |
delete-url | Строка | URL удаления файла | |
value-field-id | Ссылка на поле | Поле выборки, содержащее идентификатор файла | |
label-field-id | Ссылка на поле | Поле выборки, содержащее наименование файла | |
message-field-id | Ссылка на поле | Поле выборки, содержащее сообщение файла | |
url-field-id | Ссылка на поле | Поле выборки, содержащее URL скачивания файла | |
request-param | Строка | Наименование поля в запросе miltipart form data | |
show-size | true false | Отображение размера файла | true |
show-name | true false | Отображение имени файла | false |
accept | Строка | Доступные расширения файлов (через запятую) | |
list-type | image card | Тип отображения при мультивыборе (image - в строку только изображения с возможностью просмотра (опционально) и удаления, card - вид горизонтальной карточки с показом названия, размера и кнопками удаления и просмотра (опционально)) | image |
can-lightbox | true false | Возможность просмотра изображения в большом окне | false |
can-delete | true false | Возможность удаления изображения | true |
icon | CSS класс | Иконка по умолчанию в области загрузки | |
width | Число | Ширина области загрузки | |
height | Число | Высота области загрузки | |
icon-size | Число | Размеры иконки | Размер области загрузки |
show-tooltip | true false | Наличие тултипа | true |
shape | rounded, circle, square | Тип формы изображения | rounded |
Пример
<image-upload id="icon" label="Загрузить изображение" list-type="card" can-lightbox="true" can-delete="false" width="500" multi="true" ajax="true" upload-url="/n2o/data" delete-url="/files/delete/{file.id}" value-field-id="hash" label-field-id="filename" url-field-id="url" show-size="true" accept=".img,.png"/>
#
<text-area>Компонент ввода многострочного текста
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
min-rows | Число | Минимальная высота поля в строках текста | |
max-rows | Число | Максимальная высота поля в строках текста |
Пример
<text-area id="comment" max-rows="10" placeholder="Введите свой комментарий"/>
#
<text-editor>Компонент редактирования текста
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
toolbar-url | Строка | Путь до файла конфигурации тулбара |
Пример
<text-editor id="editor" toolbar-url="META-INF/resources/toolbar.json"/>
#
<code-editor>Компонент редактирования кода
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
language | sql xml html javascript groovy java | Язык кода | |
min-lines | Число | Минимальное число видимых строк | 5 |
max-lines | Число | Максимальное число видимых строк |
Пример
<code-editor id="editor" language="java"/>
#
<text>Компонент текста
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
format | Строка | Формат текста |
Пример
<text>Привет, {username}</text>
Тело
Текст с плейсхолдерами
#
<html>Компонент вывода html
Пример
<html id="html" default-value="<h3>Hello, World!</h3>"/>
Тело
HTML разметка с плейсхолдерами
#
<code>Компонент для просмотра программного кода с подсветкой синтаксиса
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
language | sql, xml, javascript, groovy, java | Язык кода | |
theme | light dark | Цвет фона | light |
show-line-numbers | true false | Отображение нумерации строк | true |
starting-line-number | Число | Значение, с которого будет производиться нумерация | 1 |
hide-buttons | true false | Скрытие кнопок | false |
hide-overflow | true false | Скрытие вертикальной полосы прокрутки | false |
Пример
<code show-line-number="true" starting-line-number="1" theme="light" language="java"> if (a == b) return true;</code>
Тело
Программный код
#
<rating>Компонент рейтинг
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
max | integer | Рейтинг по шкале от 1 до max | 5 |
half | true,false | Можно ставить оценку с половиной (например 3.5) | false |
show-tooltip | true,false |
Пример
<rating max="5" show-tooltip="false" half="false"/>
#
<field>Произвольный React компонент.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
src | React компонент | Реализация компонента |
Пример
<field src="MyControl" ext:prop1="value1" ext:prop2="value2"/>
#
<search-buttons>На открываемой странице будут добавлены кнопки "Найти" и "Сбросить". Кнопка "Найти" будет выполнять фильтрацию записей согласно указанным условиям. Кнопка "Сбросить" сбрасывает действие всех фильтров.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
clear-ignore | Строка | Поля, игнорируемые при сбросе фильтров |
Пример
<search-buttons id="search" clear-ignore="name,surname"/>
#
<slider>Компонент ползунок
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
mode | single range | Одиночный ползунок / мульти-режим | single |
vertical | true false | Вертикальное расположение элемента | false |
measure | Строка | Единица измерения | |
min | Число | Минимальное значение | |
max | Число | Максимальное значение | |
step | Число | Шаг приращения |
Пример
<slider id="percent" measure="%" min="0" max="100" step="5"/>
#
<alert>Компонент вывода оповещения
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
title | Строка | Текст заголовка уведомления | |
text | Строка | Текст уведомления | |
style | Строка | Стиль отображения уведомления | |
class | Строка | CSS класс уведомления | |
color | Строка | Цвет отображения уведомления, соответствует цвету Bootstrap https://getbootstrap.com/docs/4.0/utilities/colors/ | secondary |
href | Строка | Ссылка для перехода при клике по уведомлению | |
close-button | true false | Наличие кнопки закрытия уведомления | false |
Пример
<alert title="title" text="text" style="width:90%" class="css-on-field" close-button="true" color="info" href="http://example.org"/>
#
<progress>Компонент отображения прогресса
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
max | Число | Максимальное значение | |
bar-text | Строка | Описание шкалы прогресса | |
animated | true false | Включает анимацию. При включении отображает полоски | false |
striped | true false | Отображение полосок на шкале прогресса | false |
color | Строка | Цвет шкалы прогресса, соответствует цвету Bootstrap https://getbootstrap.com/docs/4.0/utilities/colors/ | |
bar-class | Строка | Класс шкалы прогресса |
Пример
<progress id="progress" max="100" color="info"/>
#
<status>Компонент отображения статуса
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
color | Строка | Цвет индикатора, соответсвует цвету в Bootstrap https://getbootstrap.com/docs/4.0/utilities/colors/ | |
text | Строка | Текст статуса | |
position | left right | Расположение текста | right |
Пример
<status id="status" color="success" text="Задача выполнена"/>
#
<hidden>Скрытое поле, в основном используется для вычисления различных значений, которые не надо показывать пользователю.
Атрибуты
Наследует базовые свойства простых компонентов.
Пример
<hidden id="sum" default-value="1"> <dependencies> <set-value on="f1,f2">(function(){return parseInt(f1) + parseInt(f2)})();</set-value> </dependencies></hidden>
#
Списковые компонентыБазовые свойства списковых компонентов
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
query-id | Идентификатор выборки | Выборка, возвращающая список вариантов для выбора. Если не задана, необходимо задать <options>. | |
label-field-id | Поле выборки | Поле выборки, отвечающее за отображение варианта выбора | |
search-filter-id | Поле выборки | Поле выборки, отвечающее за поиск вариантов выбора | label-field-id |
sort-field-id | Поле сортировки | Поле выборки, отвечающее за сортировку вариантов выбора | label-field-id |
group-field-id | Поле выборки | Поле выборки, отвечающее за группировку вариантов выбора | |
image-field-id | Поле выборки | Поле выборки, отвечающее за картинку вариантов выбора | |
badge-field-id | Поле выборки | Поле выборки, отвечающее за значение в ячейке с текстом | |
badge-color-field-id | Поле выборки | Поле выборки, отвечающее за цвет ячейки с текстом | |
icon-field-id | Поле выборки | Поле выборки, отвечающее за иконку вариантов выбора | |
status-field-id | Поле выборки | Поле выборки, отвечающее за статус в списковых компонентах | |
enabled-field-id | Строка | Идентификатор поля, которое определяет (true/false) доступен элемент для выбора или нет | |
cache | true false | Кэшировать результаты выборки | false |
size | Число | Количество вариантов выбора на одной странице | 30 |
search | true false | Возможность поиска по значению | true, если есть query-id |
begin-param | Строка | Параметр в URL для значения по умолчанию начала интервала | |
end-param | Строка | Параметр в URL для значения по умолчанию конца интервала |
#
<default-value>Значение по умолчанию спискового компонента
Атрибуты
Свойства модели спискового компонента
Пример
<select id="gender"> <default-value id="1" name="Мужской"/></select>
#
<options>Список вариантов для выбора
Пример
<select id="gender"> <options> ... </options></select>
#
<option>Вариант выбора
Атрибуты
Свойства модели спискового компонента
Пример
<options> <option id="1" name="Мужской"/> <option id="2" name="Женский"/></options>
#
<pre-filters>Предустановленные фильтры выборки спискового компонента
Тело
Пример
<select query-id="contacts"> <pre-filters> <eq field-id="type" value="{type.id}"/> </pre-filters></select>
#
<select>Компонент выбора из выпадающего списка
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
type | single checkboxes | Тип выбора в выпадающем списке | |
cleanable | true false | Опция очистки компонента | true |
select-format | Строка | Универсальный заголовок поля. Все варианты select-format будут работать только когда тип checkboxes. Нужно использовать либо универсальный заголовок, либо 3 вида заголовков при разном числе элементов. Если не задать ни один, то число выбранных элементов не будет отображаться | |
select-format-one | Строка | Заголовок поля при одном элементе | |
select-format-few | Строка | Заголовок поля при нескольких элементах | |
select-format-many | Строка | Заголовок поля при большом числе элементов | |
description-field-id | Строка | Идентификатор поля для отображения дополнительной информации в опциях выпадающего списка |
Пример
<select id="gender" label="Пол" query-id="genders" cleanable="false" />
#
<input-select>Компонент ввода текста с выбором из выпадающего списка
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
type | single, multi, checkboxes | Тип выбора в выпадающем списке | single |
reset-on-blur | true,false | Стирание значения при потере фокуса | true |
description-field-id | Строка | Идентификатор поля для отображения дополнительной информации в опциях выпадающего списка | |
max-tag-text-length | Число | Максимальная длина текста элемента | 10 |
Пример
<input-select id="gender" label="Пол" query-id="genders" type="single"/>
#
<select-tree>#
<input-select-tree>Компонент ввода с выбором в выпадающем списке в виде дерева
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
parent-field-id | Строка | Идентификатор родительского поля | |
has-children-field-id | Строка | Наличие дочерних элементов. | |
master-field-id | Строка | Идентификатор master поля | |
detail-field-id | Строка | Идентификатор detail поля | |
value-field-id | Строка | Идентификатор узла дерева. | |
ajax | true false | Поддержка загрузки через ajax запрос | false |
checkboxes | true false | Отображение чекбоксов в элементах дерева. Переводит InputSelectTree в мульти режим | false |
checking-strategy | child, parent, all | Стратегия выбора данных из дерева | all |
max-tag-count | Число | Максимальное количество элементов в поле | |
max-tag-text-length | Число | Максимальная длина текста элемента (в режиме чекбоксов) | 10 |
Пример
<input-select-tree id="address" label="Адрес" checkboxes="true" checking-strategy="child" parent-field-id="parent_id" label-field-id="name" value-field-id="id" query-id="address" has-children-field-id="hasChildren" search-filter-id="name"/>
#
<radio-group>Компонент радио кнопок
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
inline | true, false | Отображение элементов на одной строке | false, при type='tabs' inline='true' |
type | default, btn, tabs | Тип кнопок: default - радио кнопки btn - в виде обычных кнопок tabs - в виде вкладок | default |
Пример
<radio-group id="gender" inline="false" type="default"/>
#
<checkbox-group>Компонент группы чекбоксов
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
inline | true, false | Отображение элементов на одной строке | false |
type | default, btn | Тип: default - в виде чекбоксов btn - в виде обычных кнопок | default |
Пример
<checkbox-group id="gender" inline="false" type="default"/>
#
<pills>Компонент ввода Таблетки
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
type | radio, checkboxes | Тип выбора значений (radio - по одному, checkboxes - по несколько) | checkboxes |
Пример
<pills id="choice" type="radio"/>
#
<list>#
<grid>#
<tree>#
Интервальные компонентыБазовые свойства интервальных компонентов
#
<default-value>Значение по умолчанию интервального компонента
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
begin | Строка | Значение начала интервала | |
end | Строка | Значение окончания интервала | |
utc | true false | Всемирное координированное время | false |
Пример
<date-interval> <default-value begin="01.01.2019" end="31.12.2019"/></date-interval>
#
<date-interval>Компонент ввода интервала дат
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
date-format | DD.MM.YYYY DD/MM/YYYY | Формат отображения даты | DD.MM.YYYY |
time-format | HH:mm HH:mm:ss | Формат отображения времени | |
min | Строка | Минимальная дата возможная для выбора | |
max | Строка | Максимальная дата возможная для выбора | |
utc | true false | Всемирное координированное время | false |
Пример
<date-interval id="interval" date-format="DD/MM/YYYY"/>
#
<input-interval>#
<interval-field>Компонент интервала
#
<begin>Компонент начала интервала
Тело
#
<end>Компонент конца интервала
Тело
Пример
<interval-field id="range"> <begin> <input-text id="start-range" domain="integer" max="5" min="0"/> </begin> <end> <input-text id="end-range" domain="integer" max="5" min="0"/> </end></interval-field>