Регионы

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

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>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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>

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

Атрибуты

Наименование	Тип	Описание
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>

<sub-page>

Регион, обновляемый при частичной перезагрузке. Подгружает одну из подстраниц в зависимости от текущего URL

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
default-page-id	Строка	Идентификатор открываемой подстраницы по умолчанию	Идентификатор первой подстраницы

Тело

Список подстраниц

Пример

<sub-page default-page-id="profile">
    <page page-id="profile" route="/profile">...</page>
    <page page-id="documents" route="/documents">...</page>
    <page page-id="orders" route="/orders/all">...</page>
</sub-page>

<page>

Подстраница

Атрибуты

Наименование	Тип	Описание	Обязательность
page-id	Ссылка на страницу	Идентификатор открываемой подстраницы	!
route	Строка	URL, по которому будет открыта подстраница	!

Тело

<datasources> - Список переопределений источников данных
<breadcrumbs> - Список переопределений хлебных крошек
<toolbars> - Список переопределений меню управляющих кнопок
<actions> - Список переопределений действий страницы

Пример

<page page-id="profile" route="/profile">
    <datasources>...</datasources>
    <breadcrumbs>...</breadcrumbs>
    <toolbars>...</toolbars>
    <actions>...</actions>
</page>

Подробная документация o sub-page

<nav>

Регион с меню

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
direction	row column	Направление отображения элементов	row
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров	resolve

Настройки

# Направление отображения элементов
n2o.api.nav.direction_type = row

Тело

<menu-item> - Компонент меню
<dropdown-menu> - Выпадающее меню
<button> - Кнопка
<divider> - Разделитель
<link> - Ссылка
<group> - Группа

Пример

<nav datasource="ds_1" class="myClass">
    <menu-item label="Пункт меню">...</menu-item>
    <dropdown-menu label="Выпадающее меню">...</dropdown-menu>
    <link href="/profile" label="Ссылка"/>
    <divider/>
    <button label="Кнопка"/>
    <group label="Группа">...</group>
<nav>

Выпадающее меню

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
name	Строка	Заголовок выпадающего меню. Возможно использование плейсхолдеров
label	Строка	Заголовок выпадающего меню. Возможно использование плейсхолдеров
trigger	click hover	Способ активации выпадающего меню	click
position	top right bottom left auto	Расположение выпадающего меню относительно элемента	auto
icon	Строка	Иконка выпадающего меню
icon-position	left right	Позиция иконки относительно наименования выпадающего меню	left
image	Строка	Ссылка на картинку. Возможно использование плейсхолдеров
image-shape	square circle rounded	Форма картинки	square
visible	Строка	Условие видимости. Возможно использование плейсхолдеров	true
enabled	Строка	Условие доступности. Возможно использование плейсхолдеров	true
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров	Модель родительского компонента
class	Строка	CSS класс элемента меню
style	Строка	CSS стиль элемента меню

Настройки

# Способ активации выпадающего меню
n2o.api.menu.dropdown.trigger = click
# Расположение выпадающего меню относительно элемента
n2o.api.menu.dropdown.position = auto

Тело

<menu-item> - Компонент меню
<dropdown-menu> - Выпадающее меню
<button> - Кнопка
<divider> - Разделитель
<link> - Ссылка
<group> - Группа

Пример

<dropdown-menu id="list"
               name="Список действий"
               image="/static/image.png"
               image-shape="circle">
    <menu-item>...</menu-item>
    <dropdown-menu>...</dropdown-menu>
</dropdown-menu>

Кнопка

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор элемента меню
label	Строка	Заголовок элемента меню. Возможно использование плейсхолдеров
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров	Модель родительского компонента
icon	Строка	Иконка элемента меню
icon-position	left right	Позиция иконки относительно заголовка элемента меню	left
image	Строка	Ссылка на картинку. Возможно использование плейсхолдеров
image-shape	square circle rounded	Форма картинки	square
badge	Строка	Значок элемента меню. Возможно использование плейсхолдеров
badge-color	primary secondary success danger warning info light dark	Цвет значка. Возможно использование плейсхолдеров
badge-position	left right	Позиция значка	right
badge-shape	rounded circle square	Форма значка	circle
badge-image	Строка	Ссылка на картинку в значке. Возможно использование плейсхолдеров
badge-image-position	left right	Позиция картинки в значке	left
badge-image-shape	rounded circle square	Форма картинки в значке	circle
src	Строка	React компонент элемента меню
class	Строка	CSS класс элемента меню
style	Строка	CSS стиль элемента меню
visible	Строка	Условие видимости. Возможно использование плейсхолдеров	true
enabled	Строка	Условие доступности. Возможно использование плейсхолдеров	true
color	primary secondary success danger warning info light dark link	Цвет кнопки. Возможно использование плейсхолдеров
description	Строка	Описание при наведении на кнопку
tooltip-position	left right top bottom	Позиция подсказки
action-id	Ссылка на действие	Действие, которое будет вызвано при нажатии на элемент меню

Настройки

#Позиция иконки относительно заголовка элемента меню
n2o.api.menu.item.icon_position = left
#Форма картинки
n2o.api.menu.item.image_shape = square
#Позиция значка
n2o.api.menu.button.badge.position=right
#Форма значка
n2o.api.menu.button.badge.shape = circle
#Позиция картинки в значке
n2o.api.menu.button.badge.image_position = left
#Форма картинки в значке
n2o.api.menu.button.badge.image_shape = circle

Тело

Список действий

Пример

<button label="Кнопка" color="danger">
    <alert text="test" color="success"/>
</button>
<button label="Кнопка" action-id="act1"/>

Разделитель

Атрибуты

Наименование	Тип	Описание
class	Строка	CSS класс элемента меню
style	Строка	CSS стиль элемента меню

Пример

<divider class="test" style="background-color: blue"/>

Ссылка

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию	Обязательность
label	Строка	Заголовок ссылки. Возможно использование плейсхолдеров
href	Строка	Адрес URL. Возможно использование плейсхолдеров. Подробнее о формировании ссылки		!
icon	Строка	Иконка элемента меню
icon-position	left right	Позиция иконки относительно наименования элемента меню	left
target	newWindow self application	Сценарий открытия ссылки: `newWindow` - в новой вкладке (относительный путь добавляется после хоста) `self` - в текущей вкладке (относительный путь добавляется после хоста) `application` - в текущей вкладке (относительный путь добавляется после #)	newWindow
visible	Строка	Условие видимости. Возможно использование плейсхолдеров	true
enabled	Строка	Условие доступности. Возможно использование плейсхолдеров	true
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров	Модель родительского компонента
class	Строка	CSS класс элемента меню
style	Строка	CSS стиль элемента меню

Тело

<path-param> - Параметр пути
<query-param> - Параметр запроса

Пример

<link
    label="label"
    href="http://test.ru"
    icon="fa fa-plus"
    target="self">
    <path-param>...</path-param>
    <query-param>...</query-param>
</link>

Группа

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
label	Строка	Заголовок элемента меню. Возможно использование плейсхолдеров
collapsible	true false	Возможность раскрытия и сворачивания группы	true
default-state	expanded collapsed	Состояние раскрытия элементов группы	expanded
icon	Строка	Иконка элемента меню
icon-position	left right	Позиция иконки относительно заголовка элемента меню	left
visible	Строка	Условие видимости. Возможно использование плейсхолдеров	true
enabled	Строка	Условие доступности. Возможно использование плейсхолдеров	true
datasource	Ссылка на источник данных	Идентификатор источника данных, из которого будет взято значение для плейсхолдеров	Идентификатор источника данных родительского компонента
model	resolve edit filter multi datasource	Модель, из которой будет взято значение для плейсхолдеров	Модель родительского компонента
class	Строка	CSS класс элемента меню
style	Строка	CSS стиль элемента меню

Настройки

# Возможность раскрытия и сворачивания группы
n2o.api.menu.group.collapsible = true
# Состояние раскрытия элементов группы
n2o.api.menu.group.default_state = expanded

Тело

<menu-item> - Компонент меню
<dropdown-menu> - Выпадающее меню
<button> - Кнопка
<divider> - Разделитель
<link> - Ссылка
<group> - Группа

Пример

<group
    label="Группа"
    collapsible="false"
    default-state="expanded"
    icon="fa fa-plus"
    icon-position="right">
    <menu-item>...</menu-item>
    <dropdown-menu>...</dropdown-menu>
</group>

<row>

Регион Строка с сеточной вёрсткой

Строка с сеточной вёрсткой, делящая пространство внутри на указанное количество колонок.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
columns	Число	Количество колонок, на которое разбивается строка	12
wrap	true false	Перенос не влезающих по размеру колонок на следующую строку	true
align	top middle bottom stretch	Вертикальное выравнивание	top
justify	start end center space-around space-between space-evenly	Горизонтальное выравнивание	start

Настройки

# Количество колонок, на которое разбивается строка
n2o.api.region.row.columns = 12
# Перенос не влезающих по размеру колонок на следующую строку
n2o.api.region.row.wrap = true
# Вертикальное выравнивание
n2o.api.region.row.align = top
# Горизонтальное выравнивание
n2o.api.region.row.justify = start

Тело

<col> - Список колонок
Список регионов
Список виджетов

Пример

<row columns="3">
    ...
    <col size="2">
        ...
    </col>
</row>

<col>

Колонка в строке

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
size	Число	Занимаемое количество колонок	1
offset	Число	Отступ слева (в колонках)	0

Тело

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

Пример

<col size="2" offset="1">
    <form/>
</col>

<flex-row>

Регион Строка без сеточной вёрстки

У каких-то элементов жестко заданная ширина, а какие-то элементы тянутся на оставшееся пространство.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
wrap	true false	Перенос не влезающих элементов на следующую строку	true
align	top middle bottom stretch	Вертикальное выравнивание	top
justify	start end center space-around space-between space-evenly	Горизонтальное выравнивание	start

Настройки

# Перенос не влезающих по размеру колонок на следующую строку
n2o.api.region.row.wrap = true
# Вертикальное выравнивание
n2o.api.region.row.align = top
# Горизонтальное выравнивание
n2o.api.region.row.justify = start

Тело

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

Пример

<flex-row align="stretch">
    <nav style="width: 200px">...</nav>
    <sub-page>...</sub-page>
</flex-row>

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

Виды регионов​

<region>​

<line>​

<panel>​

<scrollspy>​

<menu-item>​

<sub-menu>​

<group>​

<tabs>​

<tab>​

<sub-page>​

<page>​

<nav>​

<dropdown-menu>​

<button>​

<divider>​

<link>​

<group>​

<row>​

<col>​

<flex-row>​

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

Виды регионов

<region>

<line>

<panel>

<scrollspy>

<menu-item>

<sub-menu>

<group>

<tabs>

<tab>

<sub-page>

<page>

<nav>

<dropdown-menu>

<button>

<divider>

<link>

<group>

<row>

<col>

<flex-row>