設定容器的樣式
您可以透過混搭樣式主題或直接在「樣式內容」面板上將樣式設定套用至容器。使用樣式內容會取代特定小器具的全域主題樣式設定。依預設，系統會使用混搭樣式主題來設定容器的樣式，不過您也可以使用樣式定義。「內容」面板上的 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
|
|
預覽
|
 |
 |
|
|
預設樣式內容值是從混搭樣式主題衍生而來。
|