Меню

<menu-item>

Элемент меню

Атрибуты

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

Настройки

#Позиция иконки относительно наименования элемента меню\выпадающего меню
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"
           name="Уведомление"
           icon="fa fa-bell"
           badge="2"
           badge-color="warning">
    <a href="/notifications" target="newWindow"/>
</menu-item>
<menu-item name="Иванов И.И."/>

<dropdown-menu>

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

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
id	Строка	Идентификатор выпадающего меню
name	Строка	Наименование выпадающего меню. Возможно использование плейсхолдеров
datasource	Строка	Идентификатор источника данных	Идентификатор источника данных родительского компонента
icon	Строка	Иконка выпадающего меню
icon-position	left right	Позиция иконки относительно наименования выпадающего меню	left
image	Строка	Ссылка на картинку. Возможно использование плейсхолдеров
image-shape	square circle rounded	Форма картинки	square

Тело

<menu-item> - Компонент меню
<dropdown-menu> - Выпадающее меню

Пример

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