コンポーネントのスタイル・クラス

ユーザーがコンポーネントに適用できる、スタイルの定義済リストを作成できます。

コンポーネントのスタイルの事前定義済リストを作成することは、テーマの設計ファイルによって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 {â¦}