设置容器样式
可通过混搭样式主题或直接在“样式属性”面板上将样式应用至容器。使用样式属性会覆盖特定小组件的全局主题样式。默认情况下，使用混搭样式主题设置容器样式，但也可以使用样式定义来设置样式。“属性”面板上的 UseTheme 属性用于控制容器的主题模式。
要显示容器的样式主题属性，请执行以下操作：
1. 从“资源管理器”面板中选择容器。
◦ 或者，单击容器内的空白区域。
2. 单击“样式属性”面板。
3. 展开“基本”状态。样式属性将在 Container 部分下列出。
可以从样式主题样式切换到样式定义。要使用样式定义，请执行以下操作：
1. 选择容器。
2. 在“属性”面板上，清除 UseTheme 复选框。
3. 单击“样式属性”面板。
现在，将显示容器的样式定义，而不是样式属性。
自定义 CSS
可对容器应用不同的样式组合，例如自定义 CSS、样式主题和样式属性。以下是样式规则优先级的列表，从高到低依次为：
|
优先级
|
样式方法
|
说明
|
|---|---|---|
|
最高
|
样式属性
|
使用“样式属性”面板应用到容器的样式。您可以使用样式属性来覆盖应用至样式主题的默认样式。
|
|
混搭自定义 CSS
|
应用到混搭实体“自定义 CSS”选项卡的 CSS 规则。当两个规则具有相同的特异性时，混搭 CSS 规则会覆盖样式主题 CSS 规则。
|
|
|
样式主题自定义 CSS
|
应用到样式主题实体“自定义 CSS”选项卡的 CSS 规则。
|
|
|
最低
|
样式主题
|
继承自应用至混搭的样式主题的样式。可以通过主题对混搭中的所有容器应用一致的默认样式。
|
通常，混搭级 CSS 的优先级高于样式主题 CSS。但是，优先级可能会根据 CSS 规则的具体类型发生变化。例如，您可以通过将 !important 规则添加到属性来提高自定义 CSS 规则的特异性，如下所示：
.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
|
|
预览
|
 |
 |
|
|
默认样式属性值衍生自混搭样式主题。
|