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

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

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

В режиме редактирования в блоке Вид отображаются настройки панели или виджета, находящегося в рабочей области информационной панели. Отображение настроек зависит от фокуса на рабочей области панели.

Для информационной панели и всех объектов на панели доступно:

  • 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

Опции блока Название применяются для всех устройств при просмотре панели по ссылке.

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

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

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

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

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

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

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

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

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

Настройки

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

img

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

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

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

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

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

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

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

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

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

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

Фон

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

img

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

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

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

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

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

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

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

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

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

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

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

Вкладки

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

img

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

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

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

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

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

        img

      • список;

        img

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

        img

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

По умолчанию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аналитические виджеты

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

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

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

  • 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

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

  • Координаты и размеры - настройки расположения и размеров объектов:

    • img координаты - настройка расположения объекта ;

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

  • Отступы - настройки отступов от края объекта:

    • img По горизонтали - поле ввода отступа внутри объекта от края слева направо. По умолчанию значение 16;

    • img По вертикали - поле ввода отступа внутри объекта от края сверху внизу. По умолчанию значение 16;

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

img

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

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

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

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

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

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

Отображение

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

img

Отображение недоступно для виджетов Тренд, KPI и HTML.

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

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

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

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

При отключении отображения хлебных крошек (опция Группы строк выключена) на виджете продолжает быть доступна кнопка сброса группировок svg, если в виджете только один уровень группировки.

Группы строк недоступно для виджета Таблица агрегатов.

  • img Группы cтолбцов - при нажатии включает/выключает хлебных крошек в виджете Сводная таблица. По умолчанию настройка включена;

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

Показатели недоступно для виджета типа Таблица и Таблица агрегатов.

Фон

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

img

Фон недоступно для виджетов Тренд, KPI и HTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Переменные

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

img

Блок Переменные доступен, если на виджете есть переменные.

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

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

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

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

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

  • настройки каждой переменной:

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

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

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

    • Алисас:

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

      • img Расположение - размещение алиаса на панели, относительно открываюещгося списка:

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

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

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

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

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

    • Плейсхолдер - настройки подсказки в поле выбора/ввода значения:

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

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

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

      Если длина текста больше размера поля, то текст обрезается под ширину поля, в конец строки добавляется ....

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

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

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

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

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

      Начертание, Размер, Цвет текста, а также поле ввода текста активны при включенной настройке Отображение.

    • Значение:

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

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

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

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

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

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

    • Фон:

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

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

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

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

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

Внешний вид виджета

Для каждого виджета отображается блок настроек внешнего вида, аналогичный разделу Виджеты, вкладка Вид. Подробнее о настройках внешнего вида читайте в разделе Настройка визуализации данных.

Для графических виджетов в блоке настроек внешнего вида доступен раздел Тултипы. Раздел позволяет настроить всплывающую детализацию, которая отображается при наведении на элемент виджета. Настройки тултипов недоступны для табличных виджетов, а также для виджетов Тренд, KPI, HTML, Гео-виджет.

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

Фильтр

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

img

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

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

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

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

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

img

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

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

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

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

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

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

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

Параметры

Позволяет задать настройки для изменения внешнего вида системных виджетов - фильтров.

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

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

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

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

  • Наименование - настройки наименования фильтра:

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

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

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

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

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

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

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

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

  • Плейсхолдер - настройки подсказки в поле выбора/ввода значения:

    Блок настроек Плейсхолдер отображается только для фильтров с типом Список, Множественный выбор и Поле ввода.

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

    • img текст - поле ввода текстовой информации. По умолчанию значение Выберите - для Список, Множественный выбор и Введите значение - для Поле ввода;

    Если длина текста больше размера поля, то текст обрезается под ширину поля, в конец строки добавляется ....

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

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

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

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

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

    Начертание, Размер, Цвет текста, а также поле ввода текста активны при включенной настройке Отображение.

  • Значение - настройки значений фильтра:

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

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

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

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

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

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

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

  • Фон - настройки фона фильтра:

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

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

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

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

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

Переменная

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

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 По горизонтали - список вариантов расположения объектов в контейнере по горизонтали:

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

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

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

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

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

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

  • Координаты и размеры - расположение и размеры объекта:

    • img координаты - настройка расположения объекта на информационной панели;

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

Параметры

Позволяет задать настройки внешнего вида алиаса, фона и значений на панели.

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

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

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

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

  • Алисас:

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

    • img Расположение - размещение алиаса на панели, относительно открываюещгося списка:

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

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

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

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

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

  • Плейсхолдер - настройки подсказки в поле выбора/ввода значения:

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

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

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

    Если длина текста больше размера поля, то текст обрезается под ширину поля, в конец строки добавляется ....

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

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

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

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

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

    Начертание, Размер, Цвет текста, а также поле ввода текста активны при включенной настройке Отображение.

  • Значение:

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

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

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

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

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

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

  • Фон:

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

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

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

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

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

Кнопка

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

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 Открытие ссылки - поле ввода ссылки, на которую будет совершен переход при нажатии кнопки;

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

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

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

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

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

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

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

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

img

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

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

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

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

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

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

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

Кнопка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обводка

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

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

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

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

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

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

Текст

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

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

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

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

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

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

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

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

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

Иконка

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

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

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

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

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

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

Контейнер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

img

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

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

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

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

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

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

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

Фон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладки

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

img

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

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

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

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

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

        img

      • список;

        img

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

        img

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изображение

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

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 Тень - при нажатии включает/выключает отображение тени фона. По умолчанию настройка выключена;

Текст

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

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

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

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

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

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

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

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

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

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

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

  • Координаты и размеры - расположение и размеры объекта:

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

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

  • Отступы - настройки отступов от края объекта:

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

    • img По вертикали - поле ввода отступа внутри объекта от края сверху внизу. По умолчанию значение 0;

Фон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

img

Перечень всех настроек плавающей панели:

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

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

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

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

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

  • svg ссылка - кнопка для добавления ссылки в текст. Выделите текст и нажмите кнопку для установки ссылки к уже имеющемуся фрагменту текста. Интерфейс добавления ссылки содержит:

    • Текст - текст, к которому будет привязана ссылка. Поле недоступно для редактирования, если текст был выделен для добавления ссылки;
    • Ссылка - URL-адрес ссылки формата https://domain.ru. Кнопка svg позволяет перейти по ссылке для проверки;
    • Открывать в отдельной вкладке - при нажатии включает/выключает открытие ссылки в отдельной вкладке браузера. По умолчанию настройка выключена;
    • кнопка img Добавить ссылку - при нажатии сохраняет настройки и добавляет ссылку;

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

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

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

    • svg слева;
    • svg по центру;
    • svg справа;

  • svg список - кнопки:

    • svg маркированный;
    • svg нумерованный;

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

В системном виджете Текст можно использовать только редактируемые переменные, вынесенные из виджета на панель как системный виджет Переменная. Переменные типов Расчетная и Константа можно использовать только внутри того виджета, в котором они определены.

Переменные можно добавить в текст вручную:

  • наберите символ "[" и выберите из списка;

  • выполните Копировать наименование у переменной и вставьте в текст;

img