Skip to main content

Структура приложения

Структура приложения (<application>)#

Тип метаданных

application

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

http://n2oapp.net/framework/config/schema/application-1.0

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
navigation-layoutСтрокаМакет отображения элементов управления.
Возможные значения:
fullSizeHeader - заголовок во всю ширину экрана
fullSizeSidebar - боковая панель во всю высоту экрана
fullSizeHeader
navigation-layout-fixedBooleanЗафиксированы ли header и sidebarfalse
welcome-page-idСтрокаСсылка на страницу, которая открывается по root(/)

Пример

<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-1.0"    navigation-layout="fullSizeSidebar" navigation-layout-fixed="true" welcome-page-id="index">    <header>...</header>    <sidebar>...</sidebar>    <footer>...</footer></application>

Тело

Шапка(header), боковая панель, подвал(footer)

Шапка (<header>)#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация шапкиHeader
titleСтрокаЗаголовок шапки
styleCSS свойстваСтиль шапки
classCSS классCSS класс шапки
visibleBooleanВидимость шапкиtrue
logo-srcСтрокаПуть к файлу с логотипом, который будет отображаться в шапкеtrue
home-page-urlСтрокаURL домашней страницы(переход на нее происходит по клику на логотип или название в шапке)
sidebar-iconСсылкаИконка открытия боковой панели, если не задана, значит кнопки не будет
sidebar-toggled-iconСтрокаИконка скрытия боковой панели, если не задана, значит кнопки не будет

Тело

Основное меню, дополнительное меню, строка поиска

Пример

<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-1.0">    <header title="N2O">        <nav>...</nav>        <extra-menu>...</extra-menu>        <search>...</search>    </header></application>

Боковая панель (<sidebar>)#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация боковой панелиSidebar
titleСтрокаНазвание в заголовке боковой панели
styleCSS свойстваСписок CSS свойств
classCSS классCSS класс боковой панели
visibleBooleanВидимость боковой панелиtrue
sideСтрокаСторона появления боковой панели,
возможные значения left, right
left
welcome-page-idСсылкаСсылка на страницу
logo-srcСтрокаПуть к файлу с логотипом, который будет
отображаться в заголовке боковой панели
home-page-urlСтрокаURL страницы, переход на которую происходит
по клику на логотип или название
в заголовке боковой панели
logo-classCSS классCSS класс для области с логотипом и названием
default-stateСтрокаСостояние сайдбара по умолчанию.
Возможные значения:
none - скрыт полностью
micro - отображается тонкая полоска
mini - отображаются только иконки
maxi - широкая боковая панель
none
toggled-stateСтрокаСостояние боковой панели принимаемое
при нажатии на кнопку toggle-sidebar, которую можно
добавить в меню заголовка приложения. Возможные значения:
none - скрыт полностью
micro - отображается тонкая полоска
mini - отображаются только иконки
maxi - широкая боковая панель
maxi
toggle-on-hoverBooleanОткрывается ли панель по hoverfalse
overlayBooleanПерекрывает ли боковая панель контент страницыtrue

Пример

<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-1.0">    <sidebar title="N2O">        <nav>...</nav>        <extra-menu>...</extra-menu>    </sidebar></application>

Подвал (<footer>)#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация подвалаDefaultFooter
styleCSS свойстваСписок CSS свойств
classCSS классCSS класс подвала
right-textСтрокаТекст в подвале справа
left-textСтрокаТекст в подвале слева
visibleBooleanВидимость подвалаtrue

Пример

<?xml version='1.0' encoding='UTF-8'?><application xmlns="http://n2oapp.net/framework/config/schema/application-1.0">    <footer left-text="N2O"/></application>

Навигационная панель#

<nav>#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация меню
ref-idСсылкаСсылка на родительский файл меню

Тело

Список элементов меню

Пример

<nav>    <a href="http://google.com/"/>    <page page-id="ProtoPage" route="/proto" label="Контакты"/>    <sub-menu>...</sub-menu></nav>

<extra-menu>#

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
srcReact компонентРеализация шапки
ref-idСсылкаСсылка на родительский файл меню

Тело

Список элементов меню

Пример

<extra-menu>    <page page-id="ProtoPage" route="/proto" label="Контакты"/>    <a href="http://google.com/"/>    <sub-menu>...</sub-menu></extra-menu>

<search>#

Панель поиска

Атрибуты

НаименованиеТипОписаниеЗначение по умолчанию
query-idСтрокаЗапрос за данными
filter-field-idСтрокаИдентификатор поля фильтра
url-field-idСтрокаПоле выборки, отвечающее за ссылку перехода на результат поиска
label-field-idСтрокаПоле выборки, отвечающее за заголовок
icon-field-idСтрокаПоле выборки, отвечающее за иконку
description-field-idСтрокаПоле выборки, отвечающее за описание
advanced-targetself, newWindow, applicationТип сценария открытия ссылки
advanced-urlСтрокаБазовый url
advanced-paramСтрокаПараметр фильтра

Пример

<search     query-id="popupSearch"     filter-field-id="filterValue"     url-field-id="href"     label-field-id="label"     icon-field-id="icon"     description-field-id="description"     advanced-target="application"     advanced-url="/search"     advanced-param="q"/>