ユーザーがあなたのコンポーネントに適用できるスタイルの定義済リストを作成できます。
コンポーネントの事前定義済スタイル・リストを作成する作業では、テーマのデザイン・ファイルを介してOracle Content Managementによって提供されるコンポーネントのスタイル・クラスを定義する場合と同じモデルを採用します。カスタム・スタイル・クラスの名前は、コンポーネントのappinfo.json
ファイルに記載します。
追加スタイルは、design.css
およびdesign.json
ファイルに定義します。json
ファイルは、ユーザー・インタフェースに表示される名前から実際に基礎となるcss
クラス名へのマッピングを提供し、css
ファイルは、各スタイル・クラスの詳細を提供します。
design.json
ファイルには、コンポーネントの次の構造があります:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
"styles":[]
の各エントリには、特定のコンポーネントのスタイルのリストが含まれます。"name"
は、組込みローカライズ文字列への参照である場合、または使用対象の指定値である場合があります。たとえば、タイトル・コンポーネントには、次のデフォルトのスタイルが用意されています:
{ "styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ] }
名前値は、次のように、ユーザー・インタフェースに表示する実際の単語にマップされます:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
css
ファイルは、クラス値の定義を提供します:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
例として、テーマのdesign.json
ファイルには、components.json
ファイルに定義するinitialData.compomentId
値に基づいてコンポーネントのエントリを追加できます:
"componentId": "news-article"
design.json
ファイル内の対応するエントリは、次のようになります:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
design.css
ファイル内の対応するエントリは、次のようになります:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}