Поля ввода
Компоненты ввода и вывода в полях виджета.
Библиотека компонентов
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 | |
enabled | true false | Доступность поля. Поддерживаются плейсхолдеры условия. | true | |
description | Строка | Описание поля | ||
copied | true false | Копируется ли это поле при default-values-mode="merge" | true | |
depends-on | Строка | Зависимость от полей | ||
param | Строка | Параметр в URL для значение по умолчанию | ||
ref-model | resolve edit filter multi datasource | Модель, в которой будет ин ициализация значения | resolve | |
ref-datasource | Ссылка на источник данных | Ссылка на источник данных, в котором будет инициализация значения. Задайте parent-datasourse для ссылки на источник родительской страницы | Источник данных текущего виджета | |
ref-field-id | Строка | Ссылка на поле, для инициализация значения |
Настройки
# Не отображать заголовок
n2o.api.control.no_label = false
# Не отображать блок с заголовком
n2o.api.control.no_label_block = false
Тело
<dependencies> - Зависимости компонента
<validations> - Валидации компонента
<submit> - Действие обновления компонента
<toolbar> - Меню управляющих кнопок
Простые компоненты
Базовые свойства простых компонентов:
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
default-value | Строка | Значение по умолчанию простого компонента |
<alert>
Компонент вывода оповещения
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
title | Строка | Текст заголовка уведомления | |
text | Строка | Текст уведомления | |
class | CSS класс | Класс компонента уведомления | |
style | CSS свойство | Стиль компонента уведомления | |
color | primary secondary success danger warning info light dark | Цвет отображения уведомления | secondary |
href | Строка | Ссылка для перехода при клике по уведомлению | |
close-button | true false | Наличие кнопки закрытия уведомления | false |
Настройки
# Цвет уведомления
n2o.api.control.alert.color=secondary
# Наличие кнопки закрытия уведомления
n2o.api.control.alert.close_button=false
Пример
<alert title="title" text="text" style="width:90%" class="css-on-field"
close-button="true" color="info"
href="http://example.org"/>
<button>
<checkbox>
Компонент ввода флажок
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
unchecked | null false | Значение при не выбранном состоянии | null |
Настройки
# Значение при не выбранном состоянии
n2o.api.control.checkbox.unchecked=null
Пример
<checkbox id="vip" unchecked="false"/>
<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 |
Настройки
# Цвет фона
n2o.api.control.code.theme=light
# Отображение нумерации строк
n2o.api.control.code.show_line_numbers=true
# Значение, с которого будет производиться нумерация
n2o.api.control.code.starting_line_number=1
# Скрытие кнопок
n2o.api.control.code.hide_buttons=false
Тело
Программный код.
Пример
<code show-line-number="true" starting-line-number="1" theme="light" language="java">
if (a == b)
return true;
</code>
<code-editor>
Компонент редактирования кода
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
language | sql xml html javascript groovy java | Язык кода | |
min-lines | Число | Минимальное число видимых строк | 5 |
max-lines | Число | Максимальное число видимых строк |
Настройки
# Минимальное число видимых строк
n2o.api.control.code_editor.min_lines=5
Пример
<code-editor id="editor" language="java"/>
<date-time>
Компонент ввода даты и времени
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
date-format | DD.MM.YYYY DD/MM/YYYY | Формат отображения даты | DD.MM.YYYY |
time-format | HH:mm HH:mm:ss | Формат отображения времени | |
min | Строка | Минимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd). | |
max | Строка | Максимальная дата возможная для выбора. Должна быть указана в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd). | |
utc | true false | Время в UTC | false |
default-value | Строка | Значение по умолчанию простого компонента. Должно быть указано в формате ISO 8601(yyyy-MM-dd HH:mm:ss или yyyy-MM-dd). |
Настройки
# Формат отображения даты
n2o.api.control.date_time.date_format=DD.MM.YYYY
# Всемирное координированное время
n2o.api.control.date_time.utc=false
# Тип данных
n2o.api.control.date_time.domain=date
Пример
<date-time id="date" date-format="DD.MM.YYYY" min="2018-01-01T08:00:00Z" utc="true"/>
<field>
Произвольный React компонент.
Через расширенные свойства можно указать дополнительные свойства поля.
Пример
<field src="MyControl"
ext:prop1="value1"
ext:prop2="value2"/>
Тело
<controls> - Список произвольных полей
<controls>
Список произвольных полей.
Тело
<control> - Произвольное поле
<control>
Произвольное поле.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию | Обязательность |
---|---|---|---|---|
id | Строка | Идентификатор поля | ! | |
src | Строка | React компонент поля |
Пример
<field src="MyControl">
<controls>
<control id="id1"></control>
</controls>
</field>
<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"/>
<hidden>
Скрытое поле, в основном используется для вычисления различных значений, которые не надо показывать пользователю.
Атрибуты
Наследует базовые свойства простых компонентов.
Прим ер
<hidden id="sum" default-value="1">
<dependencies>
<set-value on="f1,f2">(function(){return parseInt(f1) + parseInt(f2)})();</set-value>
</dependencies>
</hidden>
<html>
Компонент вывода html
Тело
HTML разметка с плейсхолдерами.
Пример
Текст внутри html поддерживает плейсхолдеры данных, где name
- поле формы.
<html><![CDATA[<h3 class='class1' style='color:red;'>Hello, {name}!</h3>]]></html>
<image>
Компонент вывода изображения
Атрибуты
Наименование | Т ип | Описание | Значение по умолчанию |
---|---|---|---|
url | Строка | URL адрес изображения | |
data | Строка | Изображение в байтах | |
title | Строка | Заголовок | |
description | Строка | Подзаголовок | |
shape | rounded circle square | Тип формы изображения | rounded |
text-position | top left right bottom | Расположение текста относительно картинки | right |
width | Строка | Ширина картинки. Доступные единицы измерения: px , em , rem , % . При указании числа оно будет приведено к px | |
action-id | Ссылка на действие страницы или виджета | Ссылка на действие, которое необходимо выполнить при клике на картинку |
Настройки
# Тип формы изображения
n2o.api.field.image.shape=rounded
# Расположение текста относительно картинки
n2o.api.field.image.text_position=right
# Ширина картинки
n2o.api.field.image.width=
Тело
<actions> - Список действий
<statuses> - Список статусов
Пример
<image url="/myimage.png" title="Заголовок" description="Подзаголовок">
<statuses>
<status/>
...
<status/>
</statuses>
<actions>
<invoke>...</invoke>
<a>...</a>
</actions>
</image>
<actions>
Список действий.