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