Перейти к содержанию

Работа с изображениями

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

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

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

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

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

img

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

img

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

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

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

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

img

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

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

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

    img

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

    img

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

    img

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

    img

    1. переключение по Ctrl + 1
    2. переключение по Ctrl + 2
    3. переключение по Ctrl + 3
    4. переключение по Ctrl + 4
Принципы адаптивной верстки информационных панелей:
  • контент и функционал компьютерной и мобильной версии информационной панели дублируется;
  • дизайн не меняется;
  • сохраняется структура элементов.
  • img Наименование - поле ввода наименования изображения. По умолчанию значение Изображение;

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

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

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

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

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

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

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

img

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

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

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

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

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

Фон

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

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

Цвет фона применяется отдельно для каждого типа устройств.

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

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

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