Вы можете поменять настройки изменения стиля по умолчанию для каждого виджета в Experience Builder для таких свойств, как размер, расположение, анимацию, фон, границу и тень. Опции на вкладке Стиль на панели настройки виджета меняются в зависимости от ограничений, определяемых типом страниц, которые вы добавили в виджет, или родительским контейнером (например, строк или столбец или сетка), которые автоматически контролируют размер и расположение.
Помимо того, что вы можете перетащить виджеты в любое место экрана и изменить их размер и расположение, вы также можете задать конкретные значения для их размера и позиции на экране. Настройки Размер и расположение определяют, как виджет будет размещен на странице по ширине, высоте и местоположению.Вы можете задать эти значения в пикселах (px) или процентах (%). См. разделы ниже о том, какие настройки размера и расположения для виджетов применимы для полноэкранных страниц или страниц с прокруткой.
Внимание:
Перемещение виджета из одного контейнера в другой сбрасывает его размер и положение до значений по умолчанию на основе целевого контейнера. То же самое происходит, когда вы добавляете настроенные виджет из листа ожидания.
Подсказка:
Чтобы упростить выравнивание и точнее разместить виджеты, на листе отображаются линии замыкания и значения расстояния при перемещении виджета, или переместите и измените их размер вручную в фиксированной компоновке (такой как полноэкранные компоновки, окна, боковые панели и списки). Значения показывают расстояние от виджета к боковой стороне контейнера и к ближайшим виджетам, если расстояние можно рассчитать. (Виджет, который использует проценты для размещения и пикселы для параметров размера, не вычисляемый.) Когда отображаются линии замыкания, соответствующие виджеты будут замкнуты вместе через все разрешение экрана в публикации.
Есть другие настройки стилей, общие для большинства виджетов:
- Угол поворота - Поворачивает виджет на заданный угол в градусах. Положительные значения поворачивает виджет по часовой стрелке; отрицательное значение поворачивает виджет против часовой стрелке.
- Сохранить в пределах родительского контейнера – гарантирует, что вложенный виджет на будет перетащен за границы родительского виджета.
- Анимация – установите привлекательные стили анимации, используя такие эффекты, как влет, вращение и затенение. Вы также можете установить режимы перехода для перемещения между видами разделов.
- Фон – настройте фон виджета, выбрав цвет заливки или изображение. Можно использовать кнопку Быстрый стиль, чтобы выбрать предварительно настроенный дизайн, который подходит к теме вашего приложения. Если вы выберете изображение, вы можете разместить его в пределах границ виджета с помощью опций Вписать, Заполнить, По центру, Листами или Растянуть. Если вы выбрали Вписать, то вокруг изображения будет показан выбранный цвет заливки фона.
- Граница – настройте границу виджета, выбрав ее цвет, стиль (например, пунктир или точками) и толщину в пикселах. Измените размер радиуса (в пикселах или процентах), чтобы задать форму для углов виджета. Вы можете использовать один и тот же радиус для всех углов или указать размер радиуса для каждого угла отдельно. Можно использовать кнопку Быстрый стиль, чтобы выбрать предварительно настроенный дизайн, который подходит к теме вашего приложения.
- Тень окна — добавьте эффект тени вокруг виджета. Можно использовать кнопку Быстрый стиль, чтобы выбрать предварительно настроенный дизайн или использовать следующие настройки:
- Сдвиг по X – задайте горизонтальное расстояние для тени. Если указано отрицательное значение, то тень будет размещена слева от виджета, а положительное - справа.
- Сдвиг по Y – задайте вертикальное расстояние для тени. Если указано отрицательное значение, то тень будет размещена сверху от виджета, а положительное - снизу.
- Радиус размытия – примените эффект размытия для тени.
- Радиус разброса – задайте размер тени.
- Цвет – выберите цвет тени.
Примечание:
Выбранная тема влияет на выбор цветов в опциях конфигурации. Щелкните Дополнительно, чтобы выбрать пользовательский цвет, если хотите использовать цвет, который не входит в тему приложения.
Компоновка на полноэкранной странице
Когда вы добавляете в приложение полноэкранную страницу, вы можете организовать виджеты в виде свободной компоновки. Если вы перетаскиваете виджет на странице, чтобы переместить или изменить его размер, настройки Размер и положение на панели Стили обновляются соответствующим образом.
Настройки размера представляют собой комбинацию ширины и высоты контейнера. Вы можете установить значения Ширина и Высота виджета в следующих трех режимах.
- Пользовательский - Задать определенные значения.
- Растянуть - Автоматически установить размер в зависимости от размера контейнера виджета.
- Авто - Автоматически задает размер в зависимости от содержимого виджета. Используйте этот режим для виджетов, которые отображают динамические ресурсы. (Этот режим может быть недоступен для виджетов, расположенных в контейнере компоновки, например в столбце, который автоматически управляет шириной по умолчанию. Например, у виджета Изображение, помещенного в виджет Столбец, есть только режимы Растянуть и Пользовательский для настройки Ширина.
Примечание:
Если ширина задана на Растянуть или Пользовательский, вы можете выбрать сохранить соотношение сторон, когда вы перетаскиваете края для изменения размера виджета.
Расположение виджета определяется расстоянием от его сторон (левой, правой, верхней и нижней) до его контейнера. Например, вы можете задать, насколько далеко левый и верхний край виджет сдвинуты от левого и верхнего края его родительского контейнера. Когда вы добавляете виджет, вы можете ввести значение в соответствующем поле положения. Чтобы задать расстояния для противоположного края, щелкните Изменить на автоматическое (или щелкните Изменить на пользовательское на противоположном крае диаграммы).
Разные режимы размеров соответствуют различным конфигурациями положения. Например, если Ширина установлена как Пользовательская или Авто, вы можете задать положение, изменив значение расстояния для левого или правого края, а другие настройки устанавливаются автоматически. Если Ширина установлена как Растянуть, вы можете установить ее положение, изменив значение расстояния для левого и правого края, а ширина автоматически устанавливается по оставшейся длине ширины контейнера. Настройка Высота работает так же, соответственно для верхнего и нижнего края.
Подсказка:
Вы также можете изменить положение, нажав кнопки на панели инструментов в верхней части панели Стили. Например, вы можете разместить виджет в горизонтальном центре его родительского контейнера, при этом автоматически установятся значения положения слева и справа (скрывая поля ввода расстояния в диаграмме).
Обе настройки включают следующие опции единиц измерения:
- px – абсолютное значение в пикселах
- % – процент ширины и высоты контейнера.
Блоки для страницы с прокруткой
При добавлении в приложение страницы с прокруткой, ее компоновка организовывается по блокам. Блоки используют компоновку из нескольких столбцов, типа такой, которая используется в виджете Строка.
У блоков есть следующие настройки Размера и Расположения:
- Ширина – задайте фиксированную ширину в виде процентов от страницы.
- Высота – задайте фиксированную высоту в процентах, либо выберите Авто, чтобы высота блока была настроена автоматически.
- Сдвиг по X – задайте сдвиг по горизонтали в пикселах.
- Сдвиг по Y – задайте сдвиг по вертикали в пикселах.
Подсказка:
Щелкните кнопку Булавка на панели инструментов виджета, чтобы сохранить виджет видимым при прокручивании страниц.
Виджеты, вложенные в блоки
Ширина виджетов, которые вы добавляете в блок, может меняться от 1 до 12 столбцов в компоновке сетки блока. Вы можете указать только значения высоты для виджетов, вложенных в блок, а их ширина будет контролироваться сеткой.
Существует три типа режимов Высоты:
- Растянуть - Автоматически установить высоту в зависимости от родительского контейнера. Используется по умолчанию.
- Авто - Автоматически задает высоту в зависимости от содержимого виджета.
- Пользовательское - Задает определенное значение высоты в пикселах или в процентах высота контейнера.
Если вы выбираете Автоматическая или Пользовательская, вы также можете выбрать одну из следующих опций Выравнивания:
- Сверху – выровнять виджет вертикально по верху блока.
- Снизу – выровнять виджет вертикально по низу блока.
- По центру – выровнять виджет вертикально по центру блока.
Элементы сетки
Виджеты, вложенные в виджет Сетка или страницу сетки, становятся элементами сетки. Настройки размера и положения недоступны для элементов сетки. Для изменения размера виджета, включенного в сетку, вы можете изменить размер виджета Сетка или передвинуть границы между элементами сетки.
В настройках виджета Сетка или страницы сетки можно отметить Разрешить расширение, чтобы включить кнопки растягивания, которые пользователи могут нажимать, чтобы временно заставить отдельные элементы сетки занимать всю область сетки. По умолчанию, при отметке Разрешить расширение кнопки растягивания отображаются для каждого элемента. Однако, можно заменить эти настройки для отдельных виджетов. Поле для отметки Разрешить расширение также появляется на вкладке Стиль настроек каждого элемента сетки. Это полезно, если вы хотите, чтобы пользователи могли растягивать некоторые конкретные элементы сетки, но не другие.
Анимация
Используйте анимацию, чтобы настроить, как виджеты и окна отображаются при загрузке и навигации по приложению. Задайте привлекательные стили анимации с помощью таких эффектов, как влет, вращение, увеличение и сокращение. Вы также можете установить режимы перехода для перемещения между видами разделов. С предоставленными настройками анимации вы можете создать, например, следующее:
- При загрузке приложения окно появляется с вращением.
- При прокрутке страницы виджеты влетают.
- Последующий вид выталкивает предыдущий при навигации пользователя по содержимому виджета Раздел.
- Описания исчезают, когда пользователь наводит курсор на виджет Карточка.
Следующие уровни анимации поддерживаются (перечислены в порядке от более высокого уровня анимации к более низкому).
Примечание:
Уровень ниже анимации доминирует над настройками уровня выше. Например, если виджет добавлен в виджет Строка, анимация воспроизводится для строки, даже если для настройки анимации виджета установлено Нет. Иначе воспроизводится анимация виджета.
- Уровень страницы и окна - поддерживается средой и доступно в настройках и окна, этот уровень управляет анимацией для страницы или окна и всех виджетов, добавленных непосредственно в страницу или окно (виджеты первого уровня).
Примечание:
Виджеты, вложенные в виджеты компоновки, это виджеты первого уровня. Чтобы определить вложенные виджеты, посмотрите на контур.
- Уровень контейнера – поддерживается средой и доступен на вкладке Стиль для виджетов Блок, Фиксированная панель, Боковая панель, Строка, Столбец, Сетка и Раздел, этот уровень управляет анимацией для отображения контейнера, а также виджетов, добавленных непосредственно в него (но не виджетов, вложенных в эти добавленные виджеты). Этот уровень также управляет анимацией для переключения видов в виджетах Раздел.
- Уровень отдельного виджета – поддерживается средой и доступно на вкладке Стиль для виджета, этот уровень управляет, как появляется каждый виджет.
- Уровень внутри виджета – поддерживается виджетом и доступно на вкладке Содержание для виджета, этот виджет управляет анимацией для взаимодействия пользователя внутри виджета. Например, виджет Закладка проигрывает эффекты перехода, когда пользователи переключаются к другой закладке, а виджет Карточка включает анимацию при наведении курсора на элемент, чтобы показать больше информации.
У виджетов Раздел есть две настройки анимации. Настройки анимации В управляют эффектом появления панели Раздел, а Переход управляет анимацией для ее видов. Настройки вкладки Вид управляют переходом панелей вида. Настройки на вкладке Виджет управляют тем, как отображается вид. Когда содержимое виджета Раздел появляется на странице (при загрузке страницы или прокручивании до него), анимация виджета для текущего вида воспроизводится вместе с анимацией В. При переключении между видами анимация виджета воспроизводится после воспроизведения анимации вида.
Настройки анимации
Чтобы открыть панель Настройки анимации, щелкните образец или кнопку Изменить. Щелкните образец анимации, например Плавный влет или Приближение, чтобы выбрать его и просмотреть анимацию на полотне. По желанию можно настроить следующие дополнительные установки:
- Эффект – обеспечивает непрерывные, естественные варианты микроэффектов, такие как плавный, качающийся или медленный.
- Направление – определяет направление движения (сверху, снизу, слева или справа) для применимых эффектов, таких как летать и сворачиваться.
Настройки анимации для контейнеров компоновки (Блок, Фиксированная панель, Боковая панель, Строка, Столбец и Сетка) также включают настройку Содержащийся виджет, чтобы задать анимацию для виджетов, которые добавлены непосредственно в контейнер. В дополнении к опциям Эффект и Направление вы можете использовать следующие настройки для содержащихся виджетов:
- Начало — определить, когда начинается анимация содержащегося виджета относительно анимации контейнера виджетов. Выбрать Вместе с предыдущим для воспроизведения анимации одновременно с анимацией контейнера виджетов. Выбрать После предыдущего для воспроизведения анимации сразу после окончания анимации контейнера виджетов.
- Воспроизвести анимацию — как воспроизводить анимацию, если есть несколько содержащихся виджетов.
- Одновременно — воспроизводить анимацию всех содержащихся виджетов одновременно.
- По очереди — воспроизводить анимацию всех содержащихся виджетов по очереди.
Вы можете просмотреть анимацию, щелкнув кнопку Предварительный просмотр.