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

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 และใช้ part type เพื่อระบุชิ้นส่วนที่คุณต้องการกำหนดคลาส

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

กล่องเครื่องมือที่มี 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>

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