เพิ่ม CSS สำหรับองค์ประกอบของคุณ

คุณสามารถเพิ่ม CSS ที่จะระบุสไตล์ดีฟอลต์สำหรับองค์ประกอบของคุณ

1. เพิ่มไฟล์ design.css ไปยังโฟลเดอร์ assets ขององค์ประกอบของคุณพร้อมเนื้อหาต่อไปนี้

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }

2. เพิ่มไปยัง appinfo.json เพื่อประกาศคำนำหน้าของคลาสสไตล์ที่จะใช้เพื่อกำหนดสไตล์ขององค์ประกอบของคุณ หากเพิ่ม styleClassName ของ h1-component เมื่อองค์ประกอบของคุณถูกวางบนเพจ สไตล์ดีฟอลต์จะเป็น h1-component-default-style เนื้อหาใหม่ของ appinfo.json จะมีลักษณะดังนี้

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "styleClassName":"h1-component",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

3. อัปเดต render.js เพื่อโหลดไฟล์ CSS ของคุณโดยแทนที่บรรทัด 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) ด้วยบรรทัดต่อไปนี้

   define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

   หมายเหตุ:

   เนื่องจากคุณได้แก้ไขไฟล์ appinfo.json คุณต้องรีเฟรชเบราเซอร์ และเพิ่มองค์ประกอบของคุณอีกครั้งในเพจเพื่อให้การเปลี่ยนแปลงมีผล