Регионы
Библиотека компонентов
http://n2oapp.net/framework/config/schema/region-3.0
Базовые свойства
Атрибуты
| Наименование | Тип | Описание |
|---|---|---|
| id | Строка | Идентификатор региона |
| src | Строка | React компонент региона |
| class | Строка | CSS класс региона |
| style | Строка | СSS стиль страницы |
Виды регионов
<region>
Простой регион
Тело
Список регионов
Список виджетов
Пример
<region>
<table/>
<tabs/>
<form/>
</region>
<line>
Регион с горизонтальным делителем
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| label | Строка | Заголовок региона | |
| collapsible | true false | Возможность раскрытия и сворачивания региона | true |
| has-separator | true false | Отображение горизонтального делителя | true |
| expand | true false | Исходное раскрытие региона | true |
Настройки
#Возможность раскрытия и сворачивания региона
n2o.api.region.line.collapsible = true
#Отображение горизонтального делителя
n2o.api.region.line.has_separator = true
#Исходное раскрытие региона
n2o.api.region.line.expand = true
Тело
Список регионов
Список виджетов
Пример
<line collapsible="true" label="Line">
<table/>
<panel/>
<form/>
</line>
<panel>
Регион в виде панели
Атрибуты
| Наименование | Тип | Описание | Значе ние по умолчанию |
|---|---|---|---|
| header | true false | Наличие заголовка | true |
| title | Строка | Заголовок панели | |
| footer-title | Строка | Заголовок для подвала региона | |
| collapsible | true false | Возможность раскрытия и сворачивания панели | true |
| open | true false | Исходное раскрытие панели | true |
| icon | Строка | Класс иконки | |
| color | primary secondary success danger warning info light dark | Цвет панели | |
| routable | true false | Восстановление активных панелей по URL | true |
| active-param | Строка | Имя параметра активной панели в URL | Значение id |
Настройки
#Наличие заголовка
n2o.api.region.panel.header = true
#Возможность раскрытия и сворачивания панели
n2o.api.region.panel.collapsible = true
#Исходное раскрытие панели
n2o.api.region.panel.open = true
#Восстановление активных панелей по URL
n2o.api.region.panel.routable = true
Тело
Список регионов
Список виджетов
Пример
<panel collapsible="true" title="Panel">
<form/>
<line/>
<table/>
</panel>
<scrollspy>
Регион с отслеживанием прокрутки
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| active | Строка | Активный элемент по умолчанию | |
| title | Строка | Заголовок меню | |
| placement | left right | Сторона расположения меню | left |
| headlines | true false | Наличие разделительной строки между блоками | false |
| max-height | Строка | Максимальная высота содержимого региона. Доступные единицы измерения: px. При указании числа оно будет приведено к px | |
| routable | true false | Восстановление активного элемента по URL | true |
| active-param | Строка | Имя параметра активного элемента меню в URL | Значение id |
Настройки
#Сторона расположения меню
n2o.api.region.scrollspy.placement = left
#Наличие разделительной строки между блоками
n2o.api.region.scrollspy.headlines = false
#Восстановление активного элемента по URL
n2o.api.region.scrollspy.routable = true
Тело
<menu-item> - Список элементов меню
<sub-menu> - Список вложенных меню
<group> - Список групп
Пример
<scrollspy title="Регион"
placement="right"
headlines="true">
<menu-item>
...
</menu-item>
<sub-menu>
...
</sub-menu>
</scrollspy>
<menu-item>
Элемент меню
Атрибуты
| Наименование | Тип | Описание |
|---|---|---|
| id | Строка | Идентификатор элемента меню |
| title | Строка | Заголовок элемента меню |
Тело
Список регионов
Список виджетов
Пример
<menu-item id="mi" title="Меню">
<table/>
<form/>
</menu-item>
<sub-menu>
Вложенное меню
Атрибуты
| Наименование | Тип | Описание |
|---|---|---|
| id | Строка | Идентификатор вложенного ме ню |
| title | Строка | Заголовок вложенного меню |
Тело
<menu-item> - Список элементов меню
<sub-menu> - Список вложенных меню
Пример
<sub-menu id="sm" title="Вложенное меню">
<menu-item>
...
</menu-item>
<sub-menu>
...
</sub-menu>
</sub-menu>
<group>
Группа меню
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| id | Строка | Идентификатор группы | |
| title | Строка | Заголовок группы | |
| headline | true false | Наличие разделительной строки | false |
Настройки
#Наличие разделительной строки в группах
n2o.api.region.scrollspy.group.headline = false
Тело
<menu-item> - Список элементов меню
<sub-menu> - Список вложенных меню
Пример
<group title="Первая группа" headline="true">
<menu-item>
...
</menu-item>
<sub-menu>
...
</sub-menu>
</group>
<tabs>
Регион в виде вкладок
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| always-refresh | true false | Обновление данных при переключении между вкладками | false |
| lazy | true false | Ленивая загрузка вкладок | true |
| hide-single-tab | true false | Скрытие единственной доступной вкладки и отображение только ее содержимого | false |
| max-height | Строка | Максимальная высота содержимого вкладок. Доступные единицы измерения: px, em, rem При указании числа оно будет приведено к px | |
| scrollbar | true false | Отображение полосы прокрутки | false |
| datasource | Ссылка на источник данных | Идентификатор источника данных, из которого будет взято значение для active-tab-field-id | |
| active-tab-field-id | Ссылка на поле выборки | Идентификатор поля, значение которого задает id активной вкладки | |
| routable | true false | Восстановление активных вкладок по URL | true |
| active-param | Строка | Имя параметра активной вкладки в URL | Значение id |
Настройки
#Обновление данных при переключении между вкладками
n2o.api.region.tabs.always_refresh = false
#Ленивая загрузка вкладок
n2o.api.region.tabs.lazy = true
#Скрытие единственной доступной вкладки и отображение только ее содержимого
n2o.api.region.tabs.hide_single_tab = false
#Максимальная высота содержимого вкладок
n2o.api.region.tabs.max_height =
#Отображение полосы прокрутки
n2o.api.region.tabs.scrollbar = false
#Восстановление активных вкладок по URL
n2o.api.region.tabs.routable = true
Тело
<tab> - Список вкладок
Пример
<tabs always-refresh="true">
<tab name="One">
...
</tab>
<tab name="Two">
...
</tab>
</tabs>
<tab>
Вкладка
Атрибуты
| Наименование | Тип | Описание | Значение по умолчанию |
|---|---|---|---|
| id | Строка | Идентификатор вкладки | |
| name | Строка | Наименование вкладки | |
| datasource | Ссылка на источник данных | Идентификатор источника данных | Идентификатор источника данных региона |
| visible | Строка | Условие видимости. Возможно использование плейсхолдеров | true |
| enabled | Строка | Условие доступности. Возможно использование плейсхолдеров | true |
Тело
Список регионов
Список виджетов
Пример
<tab name="Вкладка">
<form/>
<panel/>
<table/>
</tab>