Регионы

Библиотека компонентов

http://n2oapp.net/framework/config/schema/region-3.0

Базовые свойства

Атрибуты

Наименование	Тип	Описание
id	Строка	Идентификатор региона
src	Строка	React компонент региона
class	CSS класс	Класс компонента региона
style	CSS свойство	Стиль компонента региона

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

Регион в виде панели.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
collapsible	true false	Возможность раскрытия и сворачивания панели	true
title	Строка	Заголовок панели
header	true false	Наличие заголовка	true
icon	Класс иконки	Класс иконки
color	primary secondary success danger warning info light dark	Цвет панели
open	true false	Исходное раскрытие панели	true
footer-title	Строка	Заголовок для подвала региона
routable	true false	Восстановление активных панелей по URL	true
active-param	Строка	Имя параметра активной панели в URL	Значение id

Настройки

#Возможность раскрытия и сворачивания панели
n2o.api.region.panel.collapsible = true
#Наличие заголовка
n2o.api.region.panel.header = true
#Исходное раскрытие панели
n2o.api.region.panel.open = true
#Восстановление активных панелей по URL
n2o.api.region.panel.routable = true

Тело
Список регионов
Список виджетов

Пример

<panel collapsible="true" class="bg-primary">
  <form/>
  <line/>
  <table/>
</panel>

<scrollspy>

Регион с отслеживанием прокрутки.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
active	Строка	Активный элемент по умолчанию
title	Строка	Заголовок меню
placement	left right	Сторона расположения меню	left
headlines	true false	Наличие разделительной строки между блоками	false
routable	true false	Восстановление активного элемента по URL	true
active-param	Строка	Имя параметра активного элемента меню в URL	Значение id
max-height	Строка	Максимальная высота содержимого региона. Доступные единицы измерения: px. При указании числа оно будет приведено к px

Настройки

#Сторона расположения меню
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 active="mi1"
            title="regionTitle"
            placement="right"
            headlines="true"
            routable="false">
    <menu-item>
        ...
    </menu-item>
    <sub-menu>
        ...
    </sub-menu>
</scrollspy>

<menu-item>

Элемент меню.

Атрибуты

Наименование	Тип	Описание
id	Строка	Идентификатор элемента меню
title	Строка	Заголовок элемента меню

Тело
Список регионов
Список виджетов

Пример

<menu-item id="mi1" title="First item title in the list">
     <table/>
     <form/>
</menu-item>

<sub-menu>

Вложенное меню.

Атрибуты

Наименование	Тип	Описание
id	Строка	Идентификатор вложенного меню
title	Строка	Заголовок вложенного меню

Тело
<menu-item> - Список элементов меню
<sub-menu> - Список вложенных меню

Пример

<sub-menu id="mi3" title="Third item title in the list">
     <menu-item>
        ...
     </menu-item>
     <menu-item>
        ...
     </menu-item>
</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>
    <menu-item>
        ...
    </menu-item>
</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
routable	true false	Восстановление активных вкладок по URL	true
active-param	Строка	Имя параметра активной вкладки в URL	Значение id
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для active-tab-field-id
active-tab-field-id	Ссылка на поле выборки	Идентификатор поля, значение которого задает 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> <!-- Первая вкладка -->
    ...
  </tab>
  <tab> <!-- Вторая вкладка -->
    ...
  </tab>
</tabs>

<tab>

Вкладка.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор вкладки
name	Строка	Наименование вкладки
datasource	Ссылка на источник данных	Идентификатор источника данных	Идентификатор источника данных региона
enabled	Строка	Условие доступности вкладки	true
visible	Строка	Условие видимости вкладки	true

Тело
Список регионов
Список виджетов

Пример

<tab id="tab1" name="Вкладка">
  <form/>
  <panel/>
  <table/>
</tab>