ความคิดเห็นในพื้นที่ทํางานเป็นองค์ประกอบกราฟิกที่คุณป้อนข้อความได้ โดยทั่วไปจะใช้เพื่อบันทึกสิ่งต่างๆ เกี่ยวกับโค้ด เช่น ความคิดเห็นที่ใช้ภาษาโปรแกรมแบบข้อความ
เปิดใช้ความคิดเห็นใน Workspace
หากต้องการเปิดใช้ความคิดเห็นใน Workspace ในแอปพลิเคชัน คุณต้องให้วิธีเขียนความคิดเห็นแก่ผู้ใช้ วิธีหนึ่งที่สามารถทำได้คือการเพิ่มรายการเมนูตามบริบทที่ สร้างความคิดเห็นของพื้นที่ทำงาน คุณสามารถลงทะเบียนรายการเมนูตามบริบทเริ่มต้นเพื่อสร้าง ลบ และทำซ้ำความคิดเห็นในพื้นที่ทำงานได้โดยใช้โค้ดต่อไปนี้
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
คุณยังสามารถสร้างตัวเลือกเมนูตามบริบทของคุณเอง หรือเพิ่มวิธีอื่นสำหรับให้ผู้ใช้เพิ่มความคิดเห็นในพื้นที่ทำงานได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเมนูตามบริบทได้ที่เมนูตามบริบท
ปรับแต่งความคิดเห็นด้วยสายตา
คุณสามารถปรับแต่งรูปลักษณ์ของความคิดเห็นในพื้นที่ทำงานได้หลายวิธี วิดีโอเหล่านี้ใช้ CSS ไม่ใช่ธีม เป็นไปได้ที่คุณสามารถควบคุมสีและขนาดส่วนใหญ่ของส่วนต่างๆ ของความคิดเห็น แต่ไม่สามารถควบคุมการจัดวางตำแหน่งได้
ตัวแปรสี CSS
คุณสามารถตั้งค่าตัวแปร commentFillColour CSS เพื่อเปลี่ยนสีพื้นหลังของพื้นที่ข้อความได้ คุณสามารถตั้งค่าตัวแปร css commentBorderColour ให้เปลี่ยนสีของแถบความคิดเห็นด้านบนและขอบของความคิดเห็น
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
คลาส CSS
มีคลาส CSS ที่แตกต่างกันที่กำหนดให้กับองค์ประกอบต่างๆ ของมุมมองความคิดเห็น ซึ่งช่วยให้คุณแก้ไขการจัดรูปแบบขององค์ประกอบได้
| คลาส CSS | รูปภาพ |
|---|---|
| blocklycomment, blocklyDraggable | 
|
| blocklySelected, blocklyคอมเมนต์ไฮไลต์ |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklycommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
การใช้ CSS ขั้นพื้นฐาน
ในกรณีส่วนใหญ่ คุณสามารถนำแอตทริบิวต์ที่กำหนดเองไปใช้กับคลาส CSS ที่เหมาะสม ดังนี้
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS สำหรับข้อความ
อย่างไรก็ตาม สำหรับข้อความ คุณจะต้องเจาะจงมากขึ้นเพื่อลบล้าง CSS ที่ตัวแสดงผลสร้างขึ้น
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
CSS สำหรับไฮไลต์ที่เลือก
และสำหรับการไฮไลต์ความคิดเห็นเมื่อเลือกความคิดเห็น ควรใช้ออบเจ็กต์ CSS กับการเปลี่ยนแปลง โดยขึ้นอยู่กับว่าความคิดเห็นยุบอยู่หรือไม่ เมื่อยุบแล้ว คุณจะใช้ CSS กับ blocklyCommentTopbarBackground หรือนำไปใช้กับ blocklyCommentHighlight ก็ได้
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
ไอคอน
คลาส blocklyFoldoutIcon, blocklyDeleteIcon และ blocklyResizeHandle จะใช้กับองค์ประกอบ <image> ทั้งหมด ซึ่งหมายความว่าหากต้องการเปลี่ยนสีหรือรูปร่างของไอคอน คุณสามารถใส่รูปภาพอื่นไว้ในโฟลเดอร์สื่อได้
| ชื่ออิมเมจ | รูปภาพ |
|---|---|
| ลูกศรแบบพับได้.svg | |
| ลบ-ไอคอน.svg | |
| resize-handle.svg | |
ลบไอคอน
ไอคอนลบจะซ่อนอยู่โดยค่าเริ่มต้น ถ้าต้องการเปิดใช้ คุณต้องใช้ CSS เพื่อทำให้มองเห็นได้
.blocklyDeleteIcon {
display: block;
}