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

Работа с контейнерами

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

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

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

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

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

• Добавить вкладки - для виджета контейнера добавляется панель вкладок. По умолчанию создаются 2 вкладки, для каждой вкладки доступны настройки внешнего вида в блоке Вид. Действие недоступно на вкладке Конструктор. Выполнение действия доступно, если ранее вкладки не были добавлены для контейнера;

  Для добавления новой вкладки нажмите на кнопку . После нажатия на кнопку появляется новая вкладка с наименованием по умолчанию Вкладка. Вкладка подсвечивается черным цветом как активная.

  

  Для переименования вкладки двойным кликом нажмите на наименование вкладки и введите понятное название.

  

  Перемещения вкладок местами выполняется с помощью drag-and-drop.

  

  Для клонирования вкладки нажмите на кнопку у наименования вкладки и в открывшемся меню выберите Клонировать. В результате создается клон вкладки - в название подставляется (клон), все виджеты наследуются с вкладки оригинала и добавляются на вкладку клон, как экземпляр виджета.

  

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

  

  Для удаления вкладки нажмите на кнопку у наименования вкладки и в открывшемся меню выберите Удалить. Чтобы подтвердить действие, нажмите на кнопку  Удалить, для отмены - нажмите на кнопку Отмена.

• Удалить - виджет контейнер удаляется из области редактирования и из списка виджетов. Если виджет содержит в себе объекты, то при удалении появится окно подтверждения действия.

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

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

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

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

  • Компьютер(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;

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

Опции в блоке Расположение элементов применяются отдельно для каждой вкладки контейнера и типа устройств.

• Расположение элементов - настройки расположения и выравнивания элементов внутри контейнера:

  • расположение - кнопки:

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

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

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

    Выравнивание активно при настройке расположения в значении горизонтально или вертикально.

  • расстояние между элементами - поле ввода расстояния между элементами. По умолчанию значение 0;

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

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

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

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

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

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

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

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

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

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

Фон

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

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

Опция Тип и настройки параметров фона применяются отдельно для каждой вкладки контейнера и типа устройств.

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

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

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

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

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

• Угол - кнопки направления градиента:

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

Цвета и Угол активны при настройке Тип в значении градиент.

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

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

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

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

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

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

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

Опции Скругление и Тень применяются для всех устройств.

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

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

Вкладки

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

Опции блока Вкладки применяются отдельно для каждого типа устройства.

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

• Параметры - настройки элемента вкладки:

  • Тип - выбор внешнего вида панели вкладок:

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

      

    • список;

      

    • переключатель;

      

  При изменении значения настройки Тип меняется набор блоков настроек и настройки.

По умолчанию

• Параметры - настройки элемента вкладки:

  • Тип - выбор внешнего вида панели вкладок: по умолчанию;

  • Расположение - размещение элемента:

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

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

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

  Выравнивание в значении слева или справа доступно при настройке Расположение в значении сверху или снизу.

  • Позиция - размещение вкладок на панели:

    • вертикально - значение по умолчанию;
    • горизонтально;

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

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

  Позиция и Выравнивание в значении по верхнему краю или по нижнему краю доступно при настройке Расположение в значении слева или справа.

  • Расстояние между - расстояние между вкладками. По умолчанию значение 16;

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

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

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

• Активное значение - настройки выбранной вкладки:

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

    • жирный - значение по умолчанию;
    • курсив;
    • подчеркнутый;

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

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

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

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

• Значение - настройки неактивной вкладки:

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

    • жирный - значение по умолчанию;
    • курсив;
    • подчеркнутый;

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

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

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

• Фон - настройки фона панели вкладок:

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

Список

• Параметры - настройки элемента вкладки:

  • Тип - выбор внешнего вида панели вкладок: список;

  • Расположение - размещение элемента:

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

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

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

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

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

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

• Значение - настройки выбранной вкладки:

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

    • жирный - значение по умолчанию;
    • курсив;
    • подчеркнутый;

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

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

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

• Фон - настройки фона панели вкладок:

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

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

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

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

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

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

Переключатель

• Параметры - настройки элемента вкладки:

  • Тип - выбор внешнего вида панели вкладок: переключатель;

  • Расположение - размещение элемента:

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

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

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

  Выравнивание в значении слева или справа доступно при настройке Расположение в значении сверху или снизу.

  • Позиция - размещение вкладок на панели:

    • вертикально - значение по умолчанию;
    • горизонтально;

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

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

  Позиция и Выравнивание в значении по верхнему краю или по нижнему краю доступно при настройке Расположение в значении слева или справа.

  • Расстояние между - расстояние между вкладками. По умолчанию значение 16;

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

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

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

• Активное значение - настройки выбранной вкладки:

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

    • жирный - значение по умолчанию;
    • курсив;
    • подчеркнутый;

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

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

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

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

• Значение - настройки неактивной вкладки:

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

    • жирный - значение по умолчанию;
    • курсив;
    • подчеркнутый;

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

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

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

• Фон - настройки фона панели вкладок:

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

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

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

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

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

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