Филдсеты
Тип метаданных
fieldset
Библиотека компонентов
http://n2oapp.net/framework/config/schema/fieldset-5.0
Базовые свойства
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| id | Строка | Идентификатор филдсета | |
| ref-id | Ссылка | Ссылка на файл филдсета | |
| src | Строка | React компонент филдсета | |
| class | CSS класс | Класс компонента филдсета | |
| style | CSS свойство | Стиль компонента филдсета | |
| label | Строка | Заголовок филдсета | |
| description | Строка | Подзаголовок филдсета | |
| field-label-location | left top | Расположение лейблов | top |
| field-label-align | left right | Выравнивание лейблов | left |
| field-label-width | Строка | Ширина лейблов. Доступные единицы измерения: px, em, rem. При указании числа оно будет приведено к px | default |
| visible | Выражение | Условие видимости | true |
| enabled | Выражение | Условие доступности | true |
| depends-on | Строка | Список полей, от которых зависит филдсет | |
| help | Строка | Подсказка |
Тело
Список полей или филдсетов или строк или столбцов.
Пример
<set>
<input-text/><!--Поле-->
<input-text/><!--Поле-->
<input-text/><!--Поле-->
</set>
<set>
<row>...</row><!--Строка-->
<row>...</row><!--Строка-->
<row>...</row><!--Строка-->
</set>
<set>
<col>...</col><!--Столбец-->
<col>...</col><!--Столбец-->
<col>...</col><!--Столбец-->
</set>
<row>
Строка филдсета.
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| class | CSS класс | Класс компонента строки | |
| style | CSS свойство | Стиль компонента строки |
Тело
Список полей или филдсетов или столбцов.
Пример
<row>
<input-text/><!--Поле-->
<input-text/><!--Поле-->
<input-text/><!--Поле-->
</row>
<row>
<col>...</col><!--Столбец-->
<col>...</col><!--Столбец-->
<col>...</col><!--Столбец-->
</row>
<col>
Столбец филдсета.
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| size | Число | Ширина столбца согласно сетке bootstrap (1-12). | |
| class | CSS класс | Класс компонента столбца | |
| style | CSS свойство | Стиль компонента столбца | |
| visible | true false | Условие видимости | true |
Тело
Пример
<col>
<input-text/><!--Поле-->
<input-text/><!--Поле-->
<input-text/><!--Поле-->
</col>
<set>
Простой филдсет.
Пример
<set>
...
</set>
<line>
Филдсет с горизонтальной линией.
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| collapsible | true false | Возможность раскрытия и сворачивания филдсета | true |
| has-separator | true false | Наличие горизонтального делителя | true |
| expand | true false | Исходное раскрытие филдсета | true |
| badge | Строка | Значок филдсета | true |
| badge-color | primary secondary success danger warning info light dark | Цвет значка. Возможно использование плейсхолдеров | |
| badge-shape | rounded circle square | Форма значка | circle |
| badge-position | left right | Позиция значка | right |
| badge-image | Строка | Картинка в значке | |
| badge-image-shape | rounded circle square | Форма картинки в значке | circle |
| badge-image-position | left right | Позиция картинки в значке | left |
Настройки
#Значение по умолчанию для возможности раскрытия и сворачивания филдсета <line>
n2o.api.fieldset.line.collapsible=true
#Значение по умолчанию для наличия горизонтального делителя в филдсете <line>
n2o.api.fieldset.line.has_separator=true
#Значение по умолчанию для исходного состояния раскрытия филдсета <line>
n2o.api.fieldset.line.expand=true
#src филдсета с динамическим числом полей
n2o.api.fieldset.line.badge.position=right
#Значение по умолчанию для позиции бейджа филдсета <line>
n2o.api.fieldset.line.badge.shape=square
#Значение по умолчанию формы бейджа филдсета <line>
n2o.api.fieldset.line.badge.image_position=left
#Значение по умолчанию картинки в значке бейджа филдсета <line>
n2o.api.fieldset.line.badge.image_shape=circle
Пример
<line label="Общие данные" collapsible="true">
...
</line>
<multi-set>
Филдсет с динамическим числом групп полей.
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| children-label | Строка | Заголовок дочерних элементов. С помощью {index} можно управлять нумерацией | |
| first-children-label | Строка | Заголовок первого дочернего элемента. Для возможности отображать без нумерации | |
| add-label | Строка | Заголовок кнопки добавления | |
| remove-all-label | Строка | Заголовок кнопки удаления всех добавленных филдсетов | |
| can-remove-first | true false | Возможность удаления первого элемента | false |
| can-add | true false | Возможность добавления новых филдсетов | true |
| can-remove | true false | Возможность удаления новых филдсетов | true |
| can-remove-all | true false | Возможность удаления всех добавленных филдсетов | false |
| can-copy | true false | Возможность копирования филдсета в новый (вместе с данными) | false |
| primary-key | Строка | Уникальный ключ каждого филдсета. | id |
| generate-primary-key | true false | Генерировать ли уникальный ключ для каждого филдсета. Значение guid будет генерироваться в primary-key. | false |
Настройки
#Значения по умолчанию для MultiFieldset
#Удаление первого элемента
n2o.api.fieldset.multi-set.can_remove_first_item=false
#Добавление новых филдсетов
n2o.api.fieldset.multi-set.can_add=true
#Удаление новых филдсетов
n2o.api.fieldset.multi-set.can_remove=true
#Копирование филдсета в новый (вместе с данными)
n2o.api.fieldset.multi-set.can_copy=false
#Удаление всех добавленных филдсетов
n2o.api.fieldset.multi-set.can_remove_all=false
#Генерация уникального ключа для каждого филдсета.
n2o.api.fieldset.multi-set.generate_primary_key=false
Пример
<multi-set id="members"
label="Участник {index}"
add-label="Добавить участника"
remove-all-label="Удалить всех участников"
can-remove-all="true"
primary-key="pk"
generate-primary-key="true">
...
</multi-set>
note
Идентификатор мультифилдсета id задает название спискового поля, в котором будут храниться все добавленные группы полей.
<multi-set id="members">
<input-text id="name"/>
...
</multi-set>
в модели данных:
"members": [
{ "name": "one", ... }, //первая группа полей
{ "name": "two", ... }, //вторая группа полей
...
]
note
Любые зависимости и валидации полей внутри мульти филдсета необходимо задавать с помощью переменной index.
Индекс определяет текущую группу полей мультифилдсета.
<multi-set id="members">
<input-text id="firstName"/>
<input-text id="lastName">
<dependencies>
<visibility on="members[index].firstName">members[index].firstName != null</visibility>
</dependencies>
</input-text>
...
</multi-set>