Определение стиля контейнера
Можно применить стиль для контейнера с помощью темы стиля мэшапа или непосредственно с панели Свойства стиля. Использование свойств стиля переопределяет глобальный стиль темы для конкретного виджета. По умолчанию стиль контейнеров определяется через стиль мэшапа, но можно также использовать определения стилей. Свойство UseTheme на панели Свойства управляет режимом тем в контейнере.
Чтобы отобразить свойства темы стиля для контейнера, выполните следующие действия.
1. Выберите контейнер на панели Проводник.
◦ Можно также щелкнуть пустую область в контейнере.
2. Щелкните панель Свойства стиля.
3. Разверните состояние Базовое. Свойства стиля перечисляются в разделе Container.
Можно переключиться от темы стиля к определению стиля. Чтобы использовать определения стилей, выполните следующие действия.
1. Выберите контейнер.
2. На панели Свойства снимите флажок UseTheme.
3. Щелкните панель Свойства стиля.
Определения стиля для контейнера теперь отображаются вместо свойств стиля.
Пользовательские CSS-таблицы
Для контейнеров можно применять различные комбинации стилей, например пользовательские CSS-таблицы, темы стилей и свойства стиля. Ниже приведен список приоритетов правил определения стиля (от самого высокого к самому низкому).
|
Приоритет
|
Метод определения стиля
|
Описание
|
|---|---|---|
|
Наибольший
|
Свойство стиля
|
Стили, которые применяются к контейнеру с помощью панели Свойства стиля. Свойства стиля можно использовать для переопределения стилей по умолчанию, которые применяются из темы стиля.
|
|
Пользовательская CSS-таблица мэшапа
|
Правила CSS, которые применяются на вкладке Пользовательская CSS-таблица сущности мэшапа. Правило CSS мэшапа переопределяет правило CSS темы стиля, если оба правила имеют одинаковую конкретность.
|
|
|
Пользовательская CSS-таблица темы стиля
|
Правила CSS, которые применяются на вкладке Пользовательская CSS-таблица сущности темы стиля.
|
|
|
Наименьший
|
Тема стиля
|
Стили, унаследованные из темы стиля, применяемой к мэшапу. Темы можно использовать для применения согласованных стилей по умолчанию ко всем контейнерам в мэшапе.
|
В общем случае правила CSS уровня мэшапа обладают более высоким приоритетом, чем правила CSS темы стиля. Однако приоритет может изменяться в зависимости от конкретности правил CSS. Например, можно повысить конкретность пользовательских правил CSS, добавив правило !important к свойству следующим образом:
.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}
margin: 50px !important;
padding: 25px !important;
}
 |
Настоятельно рекомендуется использовать темы стилей и свойства стиля вместо написания пользовательских правил CSS.
|
Свойства стиля
Можно задать следующие свойства стиля.
|
Свойство
|
Описание
|
|---|---|
|
background
|
Цвет фона контейнера.
|
|
border-color
|
Цвет линий границ.
|
|
border-radius
|
Радиус граничных углов. Свойство применяется ко всем четырем углам контейнера.
|
|
border-style
|
Стиль линий границ. Можно задать для него значение Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit или None.
|
|
border-width
|
Ширина линий границ.
|
Свойства стиля можно использовать для настройки заполнения контейнера в ThingWorx 9.3.3 или более поздней версии с помощью следующих свойств.
• padding-bottom
• padding-left
• padding-right
• padding-top
Дополнительные сведения см. в разделе Конфигурирование полей и заполнения для контейнеров.
Настройка свойств стиля контейнера
В следующей таблице перечислены значения свойств стиля для элемента flexcontainer в сравнении с пользовательскими значениями для контейнера с применением стиля.
|
Стиль/свойство
|
По умолчанию
|
Имеет стиль
|
|---|---|---|
|
Свойства
|
• background - #ffffff
• border-color - inherit
• border-radius - None
• border-style - None
• border-width - None
|
• background - #cccccc
• border-color - #AAE09F
• border-radius - 4px
• border-style - Solid
• border-width - 4px
|
|
Предварительный просмотр
|
 |
 |
|
|
Значения свойств стиля по умолчанию получаются из темы стиля мэшапа.
|