หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

CSS หมวดหมู่

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

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

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

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

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

เลือกแล้ว	เพิ่มลงใน "แถว" `div` เมื่อเลือกหมวดหมู่	`blocklyToolboxSelected`
openicon	เพิ่มลงใน "ไอคอน" `span` เมื่อเปิดหมวดหมู่ที่มีหมวดหมู่ย่อย	`blocklyToolboxCategoryIconOpen`
closedicon	เพิ่มลงใน "ไอคอน" `span` เมื่อปิดหมวดหมู่ที่มีหมวดหมู่ย่อย	`blocklyToolboxCategoryIconClosed`

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

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

ก่อนอื่น ให้กำหนดคลาส CSS ที่กำหนดเองใน JSON หรือ XML ที่กำหนดหมวดหมู่ ดังนี้

JSON

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

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

XML

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

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="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>

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