구성요소에 대한 스타일 클래스

사용자가 구성요소에 적용할 수 있는 정의된 스타일 목록을 생성할 수 있습니다.

구성요소에 미리 정의된 스타일 목록이 있으면 테마의 디자인 파일을 통해 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 {…}