Меню

<menu-item>

Элемент меню

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор элемента меню
name	Строка	Заголовок элемента меню. Возможно использование плейсхолдеров
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
action-id	Ссылка на действие	Действие, которое будет вызвано при нажатии на элемент меню

Настройки

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

Тело

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

note

Если не задать тело для <menu-item>, то он будет не кликабельным.

Пример

<menu-item id="notification"
           label="Уведомление"
           icon="fa fa-bell"
           badge="2"
           badge-color="warning">
    <a href="/notifications" target="newWindow"/>
</menu-item>
<menu-item label="Иванов И.И." action-id="act1"/>

<button>

Кнопка

Атрибуты

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

<divider>

Разделитель

Атрибуты

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

Пример

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

<link>

Ссылка

Атрибуты

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

<group>

Группа

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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> - Компонент меню
<button> - Кнопка
<divider> - Разделитель
<link> - Ссылка
<group> - Группа
<dropdown-menu> - Выпадающее меню

Пример

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

<dropdown-menu>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
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> - Компонент меню
<button> - Кнопка
<divider> - Разделитель
<link> - Ссылка
<group> - Группа
<dropdown-menu> - Выпадающее меню

Пример

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