Кнопки

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

http://n2oapp.net/framework/config/schema/button-2.0

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

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

Настройки

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

<button>

Кнопка.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
action-id	Ссылка на действие страницы или виджета	Действие страницы (или виджета, если кнопка находится в нем), которое будет вызвано при нажатии на кнопку
rounded	true false	Круглая форма кнопки	false
validate	true false	Валидирование форм при нажатии на кнопку.	true
validate-datasources	Список ссылок на источники данных	Источники данных, которые будут валидироваться	Источник данных текущего виджета
disable-on-empty-model	true false auto	Недоступность кнопки при пустой модели. true - всегда недоступна,false - всегда доступна, auto - недоступна только при пустой модели resolve, для всех остальных моделей доступна всегда.	auto

Настройки

# Круглая форма кнопки
n2o.api.button.rounded=false
# недоступность кнопки при пустой модели
n2o.api.button.disable_on_empty_model=auto

Тело
Ссылка на Обработчик действия
<dependencies> - Зависимости компонента

Пример

<button action-id="create" enabled="{type=='type1'}"/>

<button
  label="Добавить в реестр"
  icon="fa fa-plus">
    <submit datasource="ds1"/>
    <invoke operation-id="save"/>
    <open-page page-id="register"/>
    <dependencies>
        <visibility datasource="ds1">type==1</visibility>
        <enabling datasource="ds2">type==1</enabling>
    </dependencies>
</button>

<sub-menu>

Кнопка с выпадающим меню.

Атрибуты

Наименование	Тип	Описание	Значение по умолчанию
show-toggle-icon	true false	Показывать иконку переключателя	true

Настройки

#Показывать иконку переключателя
n2o.api.submenu.show_toggle_icon=true

Тело
<menu-item> - Пункт выпадающего меню

<menu-item>

Пункт выпадающего меню.

Ссылка на кнопку.

Пример

<sub-menu>
  <menu-item>...</menu-item>
  <menu-item>...</menu-item>
  <menu-item>...</menu-item>
</sub-menu>

<sub-menu>
  <menu-item action-id="create"/>
</sub-menu>

<sub-menu>
  <menu-item label="Удалить запись" icon="fa fa-trash">
    <invoke operation-id="delete"/>
  </menu-item>
</sub-menu>

<dependencies>

Зависимости компонента.

Тело
<enabling> - Условие доступности кнопки
<visibility> - Условие видимости кнопки

Пример

<button id="btn">
  <dependencies>
    ...
  </dependencies>
</button>

<enabling>

Условие доступности

Атрибуты

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

Тело
Java Script выражение.

Пример

<dependencies>
  <enabling datasource="main" model="resolve">type.id == 1</enabling>
  <!-- Поле доступно, если type.id равен 1 -->
</dependencies>

<visibility>

Условие видимости

Атрибуты

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

Тело
Java Script выражение.

Пример

<dependencies>
  <visibility datasource="main" model="resolve">type.id == 1</visibility>
  <!-- Поле видимо, если type.id равен 1 -->
</dependencies>