Платформа 3V/Формы/Компоненты/Основные/Кнопка: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
Компонент представляет собой командную кнопку, с помощью которой пользователь может вызывать выполнение какого-либо действия.
+
{{DISPLAYTITLE:Кнопка}}
 +
'''Кнопка''' - компонент представляющий собой командную кнопку, с помощью которой пользователь может вызывать выполнение какого-либо действия.
 +
<div class="NavFrame collapsed">
 +
  <div class="NavHead"> Описание настроек компонента</div>
 +
  <div class="NavContent"> </br>
  
−
Пример визуального отображения компонента:
+
{| class="wikitable" style="margin:auto; clear:both;"
−
[[Файл:Кнопка.jpg|обрамить|слева]]
+
! Название в конструкторе !! Название в JSON !! Допустимый тип !! Описание
−
<br>
 
−
<br>
 
−
<br>
 
−
<br>
 
−
<br><br>
 
−
 
 
−
== Свойства и настройки компонента: ==
 
−
 
 
−
{| class="wikitable"
 
 
|-
 
|-
−
! Наименование настройки в интерфейсе !! Наименование свойства !! Тип !! Описание
+
| Описание для шаблона  || templateDescription || string || Наименования настроенного шаблона компонента. Не отображается на форме.
 
|-
 
|-
−
| Заголовок || label || строковый || Заголовок компонента
+
| Заголовок || localizedText. defaultValue  || string || Заголовок компонента. Располагается над компонентом.
 
|-
 
|-
−
| Иконка || faIcon || строковый || Иконка
+
| Подсказка || localizedHint.defaultValue || string || Текст всплывающей подсказки. Подсказка всплывает при наведении на компонент
 
|-
 
|-
−
| Положение иконки || || || Выбор положения иконки
+
| Тип || type || main, basic,<br> text|| Тип кнопки. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Изменить тип кнопки|Подробнее...]].
 
|-
 
|-
−
| Отображать || visible || логический || Флаг, отвечающий за видимость компонента
+
| Размер || size  || small, default,<br> medium, large || Выбор размера компонента. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Изменить размер кнопки|Подробнее...]].
 
|-
 
|-
−
| Включено || enable || логический || Флаг, отвечающий за доступность компонента
+
| Иконка || faIcon || string || Иконка на кнопку. Источник [https://fonts.google.com/icons?selected=Material+Icons Material Icons]. [[Платформа_3V/Формы/Компоненты/Основные/Кнопка#Настроить иконку|Подробнее...]].
 
|-
 
|-
−
| Цвет кнопки || addClass || строковый || Выбор цвета кнопки через задание css класса
+
| Расположение иконки || iconPosition|| left, right|| Расположение иконки в области кнопки.
 
|-
 
|-
−
| Высота ||   ||   || Высота кнопки
+
| Включено || enable  || bool || Флаг, при выключении которого с компонентном нельзя будет взаимодействовать.
 
|-
 
|-
−
| Размер ||  size || строковый  || Размер кнопки
+
| Отображать ||  visible || bool || Флаг, при включении которого компонент будет отображаться на форме
 
|-
 
|-
−
| isSelector || isSelector || логический  || Размер кнопки
+
| Выполнить действие <br>при изменении значения ||  doActionOnChangeValue || bool || Флаг, включении которого изменение в компоненте будет сохраняться автоматически
 
|-
 
|-
−
| Подсказка ||   ||   || Вывод подсказки при на видении курсора мыши на кнопку
+
| Действия || action || шаблон || Создание действий на компонент.
 
|-
 
|-
−
| CSS классы для компонента || className || строковый || Описание css классов для компонента
+
| Правила || enableExpressionIds/visibleExpressionIds || шаблон || Создание правил на компонент. Существуют правила доступности редактирования и видимости.
 
|-
 
|-
−
| Описание для шаблона || templateDescription || строковый || Описание, которое выводится у компонента в режиме шаблона
 
 
|}
 
|}
 +
</div></div></div><br>
  
−
== Действия bType: ==
+
== Добавить кнопку ==
−
 
+
Элемент можно добавить через конструктор<br>
−
{| class="wikitable"
+
[[Файл:Добавление элемента через конструктор.png]] <br clear="both" /><br>
 +
== Настроить заголовок ==
 +
Для настройки заголовка достаточно задать его в настройке "Заголовок". Дефолтное значение заголовка "Кнопка"<br>
 +
[[Файл:Кнопка.Заголовок.png]]<br clear="both"><br>
 +
== Настроить подсказку ==
 +
Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка"
 +
== Настроить тип кнопки==
 +
{| class="wikitable" clear:both;"
 +
|+ Соответствие типа
 +
|-
 +
! Название в конструкторе !! Название в JSON !! Внешний вид
 +
|-
 +
| Главная || main || [[Файл:Кнопка.Главная.png]]
 
|-
 
|-
−
! Код !! Описание !! Свойства !! Тип !! Описание
+
| Базовая || basic || [[Файл:Кнопка. Базовая.png]]
 
|-
 
|-
−
| rowspan="2" | linkButton || rowspan="2" | Переход по ссылке || href || строковый || Ссылка
+
| Текстовая || text || [[Файл:Кнопка.Текстовая.png]]
 
|-
 
|-
−
| target || строковый || Тип открытия ссылки (например: <code>_blank</code> откроет в новой вкладке)
 
 
|}
 
|}
  
−
== Пример. Описание в JSON формы ==
+
 
−
[https://3v.3v-group.net/navigator/#/home?viewId=54789 Ссылка на живой пример]
+
== Изменить размер кнопки ==
−
{| class="wikitable"
+
Размер элемента следует задавать в настройке "Размер".
 +
{| class="wikitable" clear:both;"
 +
|+ Соответствие размера
 +
|-
 +
! Название в конструкторе !! Название в JSON !! Размер в пикселях !! Внешний вид
 +
|-
 +
| Маленькая ||  small || 24px || [[Файл:Кнопка.Маленькая.png]]
 +
|-
 +
| По умолчанию ||  default || 32px || [[Файл:Кнопка.По умолчанию.png]]
 +
|-
 +
| Средняя||  medium || 40px || [[Файл:Кнопка.Средняя.png]]
 +
|-
 +
| Большая ||  large ||  48px || [[Файл:Кнопка.Большая.png]]
 
|-
 
|-
−
| <syntaxhighlight lang="JSON" line>
 
−
{
 
−
      "key": "key1617703631217",
 
−
      "type": "bs-button",
 
−
      "dataSourceId": 2,
 
−
      "templateOptions": {
 
−
        "visible": true,
 
−
        "addClass": "btn-primary",
 
−
        "label": "Пример кнопки (сохранение данных)"
 
−
      }
 
−
    },
 
−
</syntaxhighlight>
 
 
|}
 
|}
 +
== Настроить иконку ==
 +
Для того, чтобы выбрать иконку следует задать её наименование из [https://fonts.google.com/icons?selected=Material+Icons Material Icons]. Расположение иконки может быть перед её заголовком или над ним. Если заголовка нет, то иконка располагается в центре кнопки.<br>
 +
<br><br>

Версия 11:29, 1 октября 2021

Кнопка - компонент представляющий собой командную кнопку, с помощью которой пользователь может вызывать выполнение какого-либо действия.


Добавить кнопку

Элемент можно добавить через конструктор
Добавление элемента через конструктор.png

Настроить заголовок

Для настройки заголовка достаточно задать его в настройке "Заголовок". Дефолтное значение заголовка "Кнопка"
Кнопка.Заголовок.png

Настроить подсказку

Для настройки всплывающего окна при наведении на поле достаточно задать его текст в настройке "Подсказка"

Настроить тип кнопки

Соответствие типа
Название в конструкторе Название в JSON Внешний вид
Главная main Кнопка.Главная.png
Базовая basic Кнопка. Базовая.png
Текстовая text Кнопка.Текстовая.png


Изменить размер кнопки

Размер элемента следует задавать в настройке "Размер".

Соответствие размера
Название в конструкторе Название в JSON Размер в пикселях Внешний вид
Маленькая small 24px Кнопка.Маленькая.png
По умолчанию default 32px Кнопка.По умолчанию.png
Средняя medium 40px Кнопка.Средняя.png
Большая large 48px Кнопка.Большая.png

Настроить иконку

Для того, чтобы выбрать иконку следует задать её наименование из Material Icons. Расположение иконки может быть перед её заголовком или над ним. Если заголовка нет, то иконка располагается в центре кнопки.


Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Основные/Кнопка&oldid=4606