ลักษณะของหมวดหมู่

Blockly มี UI หมวดหมู่เริ่มต้น และมีตัวเลือกพื้นฐานบางอย่างสำหรับการจัดรูปแบบ หากต้องการดูข้อมูลเกี่ยวกับวิธีจัดรูปแบบ/กำหนดค่า UI ขั้นสูงเพิ่มเติม โปรดดู Codelab การปรับแต่งกล่องเครื่องมือ Blockly และ การพูดคุยเกี่ยวกับ Toolbox API ปี 2021

กล่องเครื่องมือหมวดหมู่ที่มี 6 หมวดหมู่ หมวดหมู่ตัวแปรจะเปิดอยู่และมีบล็อกตัวรับและตัวตั้งค่าตัวแปร สีของบล็อกจะตรงกับ สีของแถบแนวตั้งทางด้านซ้ายของชื่อหมวดหมู่ตัวแปร

CSS ของหมวดหมู่

คุณสามารถใช้ CSS เพื่อจัดรูปแบบกล่องเครื่องมือหมวดหมู่ได้

กล่องเครื่องมือหมวดหมู่ประกอบด้วยองค์ประกอบ HTML หลายรายการ ซึ่งแต่ละรายการจะจำลองส่วนต่างๆ ของกล่องเครื่องมือ ตัวอย่างเช่น แต่ละหมวดหมู่จะมี div ของตัวเองและ span แยกกันสำหรับไอคอนและป้ายกำกับ (ดูรายการทั้งหมดได้ในตารางด้านล่าง)

Blockly กำหนดคลาส CSS เริ่มต้นให้กับทุกส่วนที่มีประเภทเดียวกัน เช่น กำหนด blocklyToolboxCategoryLabel ให้กับ span ป้ายกำกับทั้งหมด ใช้คลาสเหล่านี้เพื่อจัดรูปแบบทุกส่วนที่มีประเภทเดียวกันในลักษณะเดียวกัน เช่น กำหนดสีเดียวกันให้กับป้ายกำกับทั้งหมด Blockly ใช้คลาสเหล่านี้ใน CSS เริ่มต้นสำหรับ กล่องเครื่องมือ หมวดหมู่

คุณเลือกกำหนดคลาส CSS ที่กำหนดเองให้กับแต่ละส่วนได้ เช่น กำหนดคลาส CSS ที่แตกต่างกันให้กับ span ป้ายกำกับแต่ละรายการ ใช้คลาสเหล่านี้เพื่อจัดรูปแบบส่วนต่างๆ ที่มีประเภทเดียวกันในลักษณะที่แตกต่างกัน เช่น กำหนดสีที่แตกต่างกันให้กับป้ายกำกับแต่ละรายการ

คลาส CSS เริ่มต้น

ตารางต่อไปนี้แสดงประเภท คำอธิบาย และคลาส CSS เริ่มต้นของแต่ละส่วนในกล่องเครื่องมือหมวดหมู่ หากมีปัญหาในการแสดงภาพ ให้เปิดเครื่องมือสำหรับนักพัฒนาเว็บในเบราว์เซอร์และตรวจสอบกล่องเครื่องมือ

ประเภทส่วน คำอธิบาย คลาส CSS เริ่มต้น
เนื้อหา div ที่มีหมวดหมู่ทั้งหมด blocklyToolboxCategoryGroup
คอนเทนเนอร์ div ที่มีหมวดหมู่เดียวและหมวดหมู่ย่อย blocklyToolboxCategoryContainer
แถว div ที่มีหมวดหมู่ blocklyToolboxCategory
rowcontentcontainer div ที่มีป้ายกำกับและไอคอน blocklyTreeRowContentContainer
ไอคอน span ที่มีไอคอน blocklyToolboxCategoryIcon
ป้ายกำกับ span ที่มีป้ายกำกับ blocklyToolboxCategoryLabel

นอกจากนี้ยังใช้ CSS เพื่อติดป้ายกำกับสถานะของบางส่วนในกล่องเครื่องมือด้วย

สถานะ คำอธิบาย คลาส CSS เริ่มต้น
เลือกแล้ว เพิ่มลงใน div "แถว" เมื่อเลือกหมวดหมู่ blocklyToolboxSelected
openicon เพิ่มลงใน span "ไอคอน" เมื่อเปิดหมวดหมู่ที่มีหมวดหมู่ย่อย blocklyToolboxCategoryIconOpen
closedicon เพิ่มลงใน span "ไอคอน" เมื่อปิดหมวดหมู่ที่มีหมวดหมู่ย่อย blocklyToolboxCategoryIconClosed

คลาส CSS ที่กำหนดเอง

หากต้องการกำหนดคลาส CSS ที่กำหนดเอง ให้ใช้พร็อพเพอร์ตี้ cssConfig ในคำจำกัดความของกล่องเครื่องมือ JSON หรือแอตทริบิวต์ css- ในคำจำกัดความของกล่องเครื่องมือ XML และใช้ประเภทส่วนเพื่อระบุส่วนที่ต้องการกำหนดคลาส

ตัวอย่างเช่น สมมติว่าคุณต้องการให้ป้ายกำกับทั้งหมดเป็นสีขาว แต่แต่ละหมวดหมู่มีสีพื้นหลังของตัวเอง คุณสามารถใช้คลาสเริ่มต้นสำหรับป้ายกำกับ แต่ต้องเพิ่มคลาสที่กำหนดเองสำหรับแถวของแต่ละหมวดหมู่

กล่องเครื่องมือที่มี 2 หมวดหมู่ ป้ายกำกับหมวดหมู่เป็นสีขาวทั้งคู่ แต่ สีพื้นหลังแตกต่างกัน

คำจำกัดความของหมวดหมู่ต่อไปนี้กำหนดคลาส CSS ที่กำหนดเองให้กับแถวของแต่ละหมวดหมู่ โปรดสังเกตว่าคลาสเริ่มต้นสำหรับแถว (blocklyToolboxCategory) จะรวมอยู่ในคำจำกัดความแต่ละรายการ เนื่องจาก Blockly จะเขียนทับแอตทริบิวต์ class ของแถวเมื่อกำหนดคลาส หากไม่ใส่คลาสเริ่มต้น คุณจะไม่ได้รับ CSS เริ่มต้นสำหรับคลาสนั้น

JSON

ตั้งค่าคลาส CSS ที่กำหนดเองโดยใช้พร็อพเพอร์ตี้ cssConfig

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "blocklyToolboxCategory myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "blocklyToolboxCategory yourRow"
  },
  "contents": [...],
},

XML

ตั้งค่าคลาส CSS ที่กำหนดเองโดยใช้แอตทริบิวต์ที่มีชื่อเป็นประเภทส่วนโดยมี css- นำหน้า

<category name="My category" css-row="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory yourRow">
  ...
</category>

ในไฟล์ CSS ให้ใช้คลาสที่กำหนดเองเพื่อกำหนดสีแถว และใช้คลาสเริ่มต้นเพื่อกำหนดสีป้ายกำกับ ดังนี้

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

ธีม

ธีมช่วยให้คุณระบุสีทั้งหมดของ พื้นที่ทำงานได้พร้อมกัน รวมถึงสีของหมวดหมู่ หากต้องการควบคุมอย่างละเอียดมากขึ้น ให้ใช้ CSS

หากต้องการใช้ธีม คุณต้องเชื่อมโยงหมวดหมู่กับรูปแบบหมวดหมู่ที่เฉพาะเจาะจง ดังนี้

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

สี

นอกจากนี้ คุณยังระบุสีได้โดยตรง แต่ไม่แนะนำให้ทำเช่นนั้น สีจะเป็นตัวเลขที่แปลงเป็นสตริง (0-360) ซึ่งระบุเฉดสี โปรดทราบว่าเราใช้การสะกดแบบอังกฤษ

JSON

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

โปรดทราบว่าเรายังรองรับการใช้การอ้างอิงสี ที่แปลเป็นภาษาท้องถิ่นได้ด้วย