Главная > Документация пользователя > Информационные панели

Работа с кнопками

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

Для добавления кнопки на информационную панель и нажмите кнопку на вкладке Конструктор возле блока Кнопка. После нажатия на кнопку:

• кнопка появится на нужной вкладке в области редактирования панели в левом верхнем углу с настройками по умолчанию;

• кнопка отобразится в списке в блоке Кнопка, слева от наименования отображается счетчик количества используемых экземпляров одного и того же виджета.

При наведении на виджет Кнопка на информационной панели или на вкладке Конструктор и открытии меню по кнопке  доступно:

• Клонировать - создается клон системного виджета, он автоматически добавляется на область информационной панели. В названии кнопки будет добавляться слово (клон);

• Удалить - при удалении виджета на вкладке Конструктор, удаляются все экземпляры виджета, которые используются в информационной панели. При удалении виджета из области редактирования панели, удаляется конкретный экземпляр, виджет останется доступным в списке виджетов в блоке Кнопка.

Настройки внешнего вида

Для изменения настроек кликните мышью на область кнопки и перейдите к блоку Вид. Над блоками настроек отобразится тип редактируемого объекта Кнопка.

Настройки системного виджета Кнопка содержат разделы: Настройки объекта, Кнопка, Обводка, Текст, Иконка, а также:

• Устройство - информационная панель будет адаптироваться в зависимости от разрешения экрана текущего устройства при переходе по внутренним и публичным ссылкам, переключатель преобразует размеры рабочей области:

  • Компьютер(1) — разрешение экрана 1440px и выше;

  

  • Ноутбук(2) — разрешение экрана от 1280px до 1439px;

  

  • Планшет(3) — разрешение экрана 768px до 1278px;

  

  • Телефон(4) — разрешение экрана до 768px;

  

  1. переключение по Ctrl + 1
  2. переключение по Ctrl + 2
  3. переключение по Ctrl + 3
  4. переключение по Ctrl + 4

Принципы адаптивной верстки информационных панелей:

• контент и функционал компьютерной и мобильной версии информационной панели дублируется;
• дизайн не меняется;
• сохраняется структура элементов.

• Наименование - поле ввода наименования и текста на кнопке. По умолчанию значение Кнопка;

• Открытие ссылки - поле ввода ссылки, на которую будет совершен переход при нажатии кнопки;

• Открывать в новом окне - при нажатии включает/выключает открытие ссылки в новом окне браузера. По умолчанию настройка включена;

Настройки объекта

Позволяет задать настройки расположения и размеры объекта на панели.

Перечень всех настроек блока Настройки объекта:

• координаты - настройка расположения объекта на информационной панели. По умолчанию значение Х - 10, Y - 10;

• размеры - настройка размеров объекта. По умолчанию значение ширины - 160, высоты - 40;

Изменение высоты кнопки доступно при настройке Фон в значении изображение.

У объектов, добавленных внутрь контейнера, появляются дополнительные настройки в блоке Настройки объекты. Настройки регулируют поведение объекта внутри контейнера.

Поведение в контейнере активно при настройке панели Расположение элементов в значении горизонтально или вертикально.

Перечень всех настроек блока Поведение в контейнере:

• По горизонтали - список вариантов расположения объектов в контейнере по горизонтали:

  • растянуть - объект растягивается внутри контейнера слева направо. Если все виджеты внутри контейнера растянуты, они располагаются слева направо и занимают равные участки. Значение по умолчанию;
  • фиксированный - доступно изменение ширины объекта;

• По вертикали - список вариантов расположения объектов в контейнере по вертикали:

  • растянуть - объект растягивается внутри контейнера сверху вниз. Если все виджеты внутри контейнера растянуты, они располагаются снизу вверх и занимают равные участки. Значение по умолчанию;
  • фиксированный - доступно изменение высоты объекта;

По вертикали недоступно для системного виджета Кнопка. Размеры виджета регулируются только по ширине.

Кнопка

Позволяет задать настройки элемента кнопки.

Перечень всех настроек блока Кнопка:

• Скругление - ползунок для установки скругления границы. По умолчанию значение 50;

• Фон - кнопки для выбора вида фона:

  • заливка - позволяет выбрать единый цвет фона в настройке Цвет. Значение по умолчанию;
  • градиент - позволяет выбрать фон с переходом двух цветов в настройке Цвета;
  • изображение - позволяет выбрать изображение фона в формате PNG или JPEG;

• Цвет - при нажатии раскрывается окно с палитрой цветов. По умолчанию значение #F96C89;

Цвет активна при настройке Фон в значении заливка.

• Цвета - при нажатии на сегмент открывается окно с палитрой цветов. По умолчанию установлены значения #F96C89 и #D64260. Кнопка Поменять местами позволяет поменять местами цвета для создания градиента;

Цвета активна при настройке Фон в значении градиент.

• выбор файла - при нажатии открывается окно для выбора изображения в формате PNG или JPEG. Также доступно перетаскивание файла в область для загрузки;

• Изображение - настройка поведения растягивания или масштабирования изображений:

  • заполнить - масштабирование размера без изменения пропорций изображение с обрезкой лишнего. Значение по умолчанию;
  • исходный размер - размер изображения не зависимо от размеров контейнера;
  • растянуть - масштабирование размера с нарушением пропорций изображения под элемент;
  • вместить - масштабирование размера без изменения пропорций изображения, чтобы полностью поместиться в элемент. Элемент может быть не покрыт изображением полностью;

• Выравнивание - размещение объекта:

  • слева сверху;
  • сверху;
  • справа сверху;
  • слева;
  • по центру - значение по умолчанию;
  • справа;
  • слева снизу;
  • снизу;
  • справа снизу;

Форма выбора файла, Изображение и Выравнивание активны при настройке Тип в значении изображение.

Выравнивание активно при настройке Изображение в значении исходный размер или вместить.

• Размер - кнопки для определения размера элемента:

  • S - значение по умолчанию;
  • M;
  • L;

• Выравнивание - выравнивание текста кнопки:

  • слева;
  • по центру - значение по умолчанию;

Выравнивание и Размер активно при настройке Фон в значении заливка или градиент. Наименование кнопки при настройке Фон в значении изображение всегда выравнивается снизу, максимальная длина - 3 строки.

Обводка

Позволяет задать настройки обводки элемента кнопки.

Перечень всех настроек блока Обводка:

• Отображение - при нажатии включает/выключает отображение обводки. По умолчанию настройка выключена;

• Цвет - при нажатии раскрывается окно с палитрой цветов. По умолчанию значение #FFFFFF;

• Толщина - ползунок для установки толщины обводки. По умолчанию значение 2;

Цвет и Толщина активно при включенной настройке Обводка.

Текст

Позволяет задать настройки текста элемента кнопки.

Перечень всех настроек блока Текст:

• Отображение - при нажатии включает/выключает отображение текста. По умолчанию настройка включена;

• Шрифт - при нажатии раскрывается список доступных шрифтов. По умолчанию значение PT Root UI;

• Начертание - кнопки:

  • жирный;
  • курсив;
  • подчеркнутый;

• Размер - при нажатии раскрывается список с размерами шрифта. По умолчанию значение 13;

Максимальный размер шрифта 64, так же доступен ручной ввод значения размера шрифта.

• Цвет - при нажатии раскрывается окно с палитрой цветов. По умолчанию значение #FFFFFF;

Иконка

Позволяет задать настройки иконки элемента кнопки.

Перечень всех настроек блока Иконка:

• Отображение - при нажатии включает/выключает отображение иконки. По умолчанию настройка включена;

• выбор иконки - кнопки:

  • ;
  • - значение по умолчанию;
  • ;
  • ;
  • ;
  • ;

• Цвет - при нажатии раскрывается окно с палитрой цветов. По умолчанию значение #FFFFFF;