Mashup Builder > Мэшапы > Адаптивные мэшапы > Конфигурирование полей и заполнения для контейнеров
Конфигурирование полей и заполнения для контейнеров
Добавление полей в контейнер
Поля позволяют управлять размером пустого пространства вокруг элементов в компоновке. В ThingWorx 9.3.3 или более поздних версий можно задавать поля для контейнеров в компоновке с помощью свойства Margin:
1. Выберите контейнер на канве или на панели Проводник.
2. На панели Свойства измените свойство Margin одним из следующих способов:
Введите одно или несколько значений в поле входных данных, чтобы определить порядок применения полей.
Одно значение: одно и то же значение применяется ко всем четырем сторонам.
Два значения: первое значение применяется сверху и снизу, а второе - слева и справа.
Три значения: первое значение применяется сверху, второе - слева и справа, а третье - снизу.
Четыре значения: значения применяются для верхней, правой, нижней и левой сторон контейнера.
Чтобы открыть редактор полей, щелкните значок в свойстве Margin.
Введите числовые значения, чтобы определить верхнее, правое, нижнее и левое поля контейнера в пикселях, затем нажмите кнопку Задать.
3. Нажмите кнопку Сохранить, чтобы применить изменения в мэшапе.
Значения полей будут применены для контейнера.
Конфигурирование заполнения контейнера
Заполнение управляет размером пространства между границами контейнера и его содержимым. По умолчанию для заполнения задано значение 0. Добавление заполнения уменьшает область содержимого, доступную виджетам в контейнере.
Чтобы определить заполнение для контейнера, выполните следующие шаги:
1. Выберите контейнер на канве или на панели Проводник.
2. В разделе Базовое > Контейнер настройте следующие свойства:
padding-bottom - заполнение снизу
padding-left - заполнение слева
padding-right - заполнение справа
padding-top - заполнение сверху
3. Нажмите кнопку Сохранить, чтобы применить изменения в мэшапе.
Конфигурирование полей и заполнения с помощью пользовательской CSS-таблицы
Если поля и заполнение для контейнеров задаются и с помощью пользовательской CSS-таблицы, и с помощью свойств в Mashup Builder, может потребоваться изменить правила существующей пользовательской CSS-таблицы. При переходе с предыдущих версий ThingWorx на версию 9.3.3 удостоверьтесь, что все правила пользовательской CSS-таблицы, которые применяются к контейнерам, достаточно конкретно переопределяют значения по умолчанию, которые применяются к свойствам полей и заполнения из темы стиля.
Например, можно повысить конкретность правил пользовательской CSS-таблицы, добавив правило !important для свойств полей или заполнения следующим образом:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
Дополнительные сведения об определении стиля контейнеров см. в разделе Определение стиля контейнера.
Было ли это полезно?