คลาสของสไตล์สำหรับองค์ประกอบ

คุณสามารถสร้างลิสต์ของสไตล์ที่กำหนด ซึ่งผู้ใช้สามารถนำมาใช้กับองค์ประกอบของคุณ

การมีลิสต์ของสไตล์ที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบของคุณนั้น เป็นรูปแบบที่เหมือนกับการกำหนดคลาสของสไตล์สำหรับองค์ประกอบที่มาพร้อมกับ 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 ของธีม คุณสามารถเพิ่มรายการสำหรับองค์ประกอบของคุณตามค่า initialData.compomentId ที่คุณกำหนดในไฟล์ components.json:

"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 {…}