コンテナのスタイル設定
マッシュアップスタイルテーマを介してコンテナにスタイルを適用するか、「スタイルプロパティ」パネルで直接適用できます。スタイルプロパティを使用すると、そのウィジェットのグローバルテーマによるスタイル設定がオーバーライドされます。デフォルトでは、マッシュアップスタイルテーマを使用してコンテナにスタイルが設定されますが、スタイル定義を使用することもできます。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;
}
 |
カスタム CSS 規則を記述する代わりに、スタイルテーマとスタイルプロパティを使用することを強くお勧めします。
|
スタイルプロパティ
次のスタイルプロパティを指定できます。
|
プロパティ
|
説明
|
|---|---|
|
background
|
コンテナの背景色。
|
|
border-color
|
境界線の色。
|
|
border-radius
|
境界の隅の半径。このプロパティは、コンテナの 4 つの隅すべてに適用されます。
|
|
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
|
|
プレビュー
|
 |
 |
|
|
デフォルトのスタイルプロパティ値は、マッシュアップスタイルテーマから取得されます。
|