Настройки изменения стиля

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

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

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

Примечание:

Можно выгружать следующие форматы изображений: PNG, GIF, JPG, JPEG и BMP.

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

Помимо того, что вы можете перетащить виджеты в любое место экрана и изменить их размер и расположение, вы также можете задать конкретные значения для их размера и позиции на экране. Настройки размера и расположения определяют, как виджет будет размещен на странице по ширине, высоте и местоположению. Вы можете указать эти значения в пикселах (px) или процентах (%), чтобы уточнить, как нужно разместить ваше содержание. См. разделы ниже о том, какие настройки размера и расположения для виджетов применимы для полноэкранных страниц или страниц с прокруткой.

Есть настройки стилей, общие для большинства виджетов:

  • Сохранить в пределах родительского контейнера – гарантирует, что вложенный виджет на будет перетащен за границы родительского виджета.
  • Анимация – установите привлекательные стили анимации, используя такие эффекты, как влет, вращение и затенение. Вы также можете установить режимы перехода для перемещения между видами разделов.
  • Фон – настройте фон виджета, выбрав цвет заливки или изображение. Если вы выберете изображение, вы можете разместить его в пределах границ виджета с помощью опций Вписать, Заполнить, По центру, Листами или Растянуть. Если вы выбрали Вписать, то вокруг изображения будет показан выбранный цвет заливки фона.
  • Граница – настройте границу виджета, выбрав ее цвет, стиль (например, пунктир или точками) и толщину в пикселах. Измените размер радиуса (в пикселах или процентах), чтобы задать форму для углов виджета. Вы можете использовать один и тот же радиус для всех углов или указать размер радиуса для каждого угла отдельно.
  • Тень от окна – добавьте эффект тени вокруг виджета с помощью следующих настроек:
    • Сдвиг по X – задайте горизонтальное расстояние для тени. Если указано отрицательное значение, то тень будет размещена слева от виджета, а положительное - справа.
    • Сдвиг по Y – задайте вертикальное расстояние для тени. Если указано отрицательное значение, то тень будет размещена сверху от виджета, а положительное - снизу.
    • Радиус размытия – примените эффект размытия для тени.
    • Радиус разброса – задайте размер тени.
    • Цвет – выберите цвет тени.

Компоновка на полноэкранной странице

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

Настройка Размер представляет собой комбинацию ширины и высоты контейнера. Вы можете установить ширину и высоту виджета в следующих трех режимах.

  • Пользовательский – вы можете настроить специальные значения Ширины и Высоты с режимом по умолчанию Пользовательский. Если ширина и высота заданы как Пользовательский, вы можете щелкнуть значок блокировки, чтобы сохранить соотношение сторон, что позволяет перетаскивать размер без потери его.
  • Автоматический – если значение размера установлено в значение Автоматически свойство устанавливается автоматически на основе содержимого виджета. Это может быть использовано для виджетов, отображающих динамическое содержание.
  • Растянуть – установить размер виджета зависимости от размера контейнера.
Примечание:

У настройки Размер есть отдельная особенность, вы можете разместить виджет внутри виджета Столбец или Строка. Например, если вы помещаете виджет Изображение в виджет столбец, применяется только два режима для Ширины изображения (Растянуть и Пользовательский), каждый из которых можно настроить, чтобы сохранялось соотношение сторон, если высота установлена как Пользовательская.

Положение виджета определяется расстоянием от каждой стороны до его контейнера (слева, справа, сверху, снизу). Например, Слева означает, что левый край виджета смещается относительно левого края родительского контейнера. Когда вы добавляете виджет, вы можете указать расстояние слева или сверху, введя значение в поле ввода направления, и вы можете изменить настроенное направление, нажав кнопку Изменить на пользовательское для противоположного направления или нажав кнопку Изменить на автоматическое для пользовательского.

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

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

Вы также можете изменить единицу длины как для позиции, так и для размера:

  • px – абсолютное значение в пикселах
  • % – процент ширины и высоты контейнера.

Вы можете вращать виджет по часовой стрелке с помощью настройки Вращение, задавая положительное число, или против часовой стрелки, введя отрицательное число.

Примеры

В списке ниже приведены некоторые рекомендуемые комбинации настроек размера и расположения:

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

Блоки для страницы с прокруткой

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

У блоков есть следующие настройки Размера и Расположения:

  • Ширина – задайте фиксированную ширину в виде процентов от страницы.
  • Высота – задайте фиксированную высоту в процентах, либо выберите Авто, чтобы высота блока была настроена автоматически.
  • Сдвиг по X – задайте сдвиг по горизонтали в пикселах.
  • Сдвиг по Y – задайте сдвиг по вертикали в пикселах.

Подсказка:

Щелкните кнопку Булавка на панели инструментов виджета, чтобы сохранить виджет видимым при прокручивании страниц.

Виджеты, вложенные в блоки

Ширина виджетов, которые вы добавляете в блок, может меняться от 1 до 12 столбцов в компоновке сетки блока. Вы можете указать только значения высоты для виджетов, вложенных в блок, а их ширина будет контролироваться сеткой.

Существует три типа режимов Высоты:

  • Растянуть – будет использоваться полная высота родительского контейнера. Это значение по умолчанию.
  • Автоматическая – значение высоты устанавливается автоматически содержимым виджета.
  • Пользовательская – вы можете указать значение высоты в пикселах или %.. Если вы установите отметку Сохранять соотношение сторон, вы можете перетащить виджет, чтобы изменить его размер без потери соотношения сторон.

Если вы выбираете Автоматическая или Пользовательская, вы также можете выбрать одну из следующих опций Выравнивания:

  • Сверху – выровнять виджет вертикально по верху блока.
  • Снизу – выровнять виджет вертикально по низу блока.
  • По центру – выровнять виджет вертикально по центру блока.

Настройка Вращение позволяет вращать виджет по часовой стрелке или против часовой стрелки, для этого вводится положительное или отрицательное число.

Анимация

Анимация в Experience Builder применяется для настройки того, как появляются виджеты. С предоставленными эффектами и опциями вы можете создать следующее:

  • При загрузке приложения окно появляется с вращением.
  • При прокрутке страницы виджеты влетают.
  • Более поздний вид выталкивает первый, когда вы перемещаетесь по разделу.
  • Описания исчезают, когда вы наводите курсор на виджет карты.

Поддерживаются четыре уровня анимации:

  1. Уровень Страницы / Окна – поддерживается средой и доступно в настройках страницы/окна. Он управляет анимацией появления всех виджетов первого уровня.
    Примечание:

    Виджеты первого уровня – это виджеты, которые непосредственно добавляются на страницу/окно, те виджеты, которые вложенные в виджеты компоновки не включаются. В виде Контур можно увидеть вложенные виджеты.

  2. Уровень контейнера – поддерживается средой и доступно на вкладке Стиль для виджетов Блок, Фиксированная панель, Боковая панель, Строка, Столбец и Раздел. Он управляет тем, как выглядит контейнер, а также анимацией появления виджетов, непосредственно содержащихся в нем (вложенные виджеты не включены). Для виджетов Раздел он также управляет переключением видов.
  3. Уровень отдельного виджета – поддерживается средой и доступно на вкладке Стиль в настройках виджета. Управляет появлением одного виджета.
    Примечание:

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

  4. Уровень внутри виджета – поддерживается средой и доступно на вкладке Содержаниее в настройках виджета. Управляет анимацией во время работы пользователя внутри виджета. Например, виджет Закладка проигрывает эффекты перехода, когда пользователи переключаются к другой закладке, а виджет Карточка включает анимацию при наведении курсора на элемент, чтобы показать больше информации.

Анимация контейнеров компоновки (Блок, Фиксированная панель, Боковая панель, Строка, Столбец) состоит из двух частей. С помощью анимации контейнера можно настроить появление панели контейнера. С помощью анимации содержащихся виджетов вы можете настроить внешний вид виджетов, непосредственно добавленных в контейнер. Два анимационных эффекта воспроизводятся одновременно, и конечная анимация – это результат наложения эффектов. Вы можете просмотреть получившийся результат, нажав кнопку Предварительный просмотр.

Помимо анимации В, которая управляет эффектом появления панели Раздел, виджеты Раздел имеют еще один параметр анимации, называемый Анимация перехода, который управляет анимацией видов. Вкладка Вид управляет переходом панелей видов, а вкладка Виджет – отображением виджетов в виде. Когда Раздел появляется в поле зрения (при загрузке страницы или прокручивании до него), анимация виджета для текущего вида воспроизводится вместе с анимацией В. При переключении между видами анимация виджета воспроизводится после анимации вида.

Настройки анимации

  • Нажмите на миниатюру анимации или кнопку Изменить, чтобы открыть панель эффекты.
  • Щелкните миниатюру эффекта, чтобы выбрать и просмотреть один эффект.
  • Нажмите кнопку Предварительный просмотр, чтобы просмотреть общие или комбинированные эффекты.
  • Некоторые эффекты могут иметь дополнительные параметры настройки:
    • Эффект – обеспечивает непрерывные, естественные варианты микроэффектов.
    • Направление – определяет направление движения для эффектов, таких как летать и плавать.