Skip to main content

Кнопки

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

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

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

НаименованиеТипОписаниеЗначение по умолчанию
idСтрокаИдентификатор кнопкиВычисляется из action-id
labelСтрокаЗаголовок кнопки
iconКласс иконкиИконка
icon-positionleft rightПозиция иконки относительно заголовка кнопкиleft
srcСтрокаReact компонент кнопки
classCSS классКласс компонента кнопки
styleCSS свойствоСтиль компонента кнопки
colorprimary secondary success danger warning info light dark linkЦвет кнопки. Возможно использование плейсхолдеров
badgeСтрокаЗначок кнопки
badge-colorprimary secondary success danger warning info light darkЦвет значка. Возможно использование плейсхолдеров
badge-shaperounded circle squareФорма значкаcircle
badge-positionleft rightПозиция значкаright
badge-imageСтрокаКартинка в значке
badge-image-shaperounded circle squareФорма картинки в значкеcircle
badge-image-positionleft rightПозиция картинки в значкеleft
descriptionСтрокаОписание при наведении на кнопку
tooltip-positionleft right top bottomПозиция подсказки.
modelresolve edit filter multi datasourceМодель, над которой выполнится действие. Если модель пустая, то кнопка будет заблокированаresolve
datasourceСсылка на источник данныхИдентификатор источника данных, над которым будет выполнена операцияИсточник данных текущего виджета
visibletrue falseВидимость по умолчанию.true
enabledtrue falseДоступность по умолчанию.true
generatecrud 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Ссылка на действие страницы или виджетаДействие страницы (или виджета, если кнопка находится в нем), которое будет вызвано при нажатии на кнопку
roundedtrue falseКруглая форма кнопкиfalse
validatetrue falseВалидирование форм при нажатии на кнопку.true
validate-datasourcesСписок ссылок на источники данныхИсточники данных, которые будут валидироватьсяИсточник данных текущего виджета
disable-on-empty-modeltrue 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>

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

Атрибуты

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

Настройки

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

Тело
<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Ссылка на источник данныхИдентификатор источника данных вычисления условияИсточник данных текущего виджета
modelresolve edit filter multi datasourceМодель виджета, по полю которой будет фильтрация
messageСтрокаСообщение о причине недоступности

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

Пример

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

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

Атрибуты

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

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

Пример

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