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

Blockly มี UI หมวดหมู่เริ่มต้น และมีตัวเลือกพื้นฐานบางอย่างสำหรับการจัดรูปแบบ หากต้องการข้อมูลเกี่ยวกับวิธีจัดรูปแบบ/กำหนดค่า UI ขั้นสูงเพิ่มเติม โปรดดูโค้ดแล็บการปรับแต่งกล่องเครื่องมือ 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}

ธีม

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

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

JSON

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

XML

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

สี

คุณยังระบุสีโดยตรงได้ด้วย แต่เราไม่แนะนำให้ทำ colour คือสตริงของตัวเลข (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>

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