التعليق على مساحة العمل هو عنصر رسومي يمكنك إدخال نص فيه. عادةً ما يتم استخدامها لتوثيق أشياء حول التعليمات البرمجية الخاصة بك، تمامًا مثل التعليقات في لغة البرمجة النصية.
تفعيل تعليقات مساحة العمل
لتفعيل تعليقات Workspace في تطبيقك، عليك منح المستخدمين طريقة لإنشائها. تتمثل إحدى طرق القيام بذلك في إضافة عنصر قائمة سياق ينشئ تعليقًا على مساحة العمل. يمكنك تسجيل عناصر قائمة السياق الافتراضية لإنشاء تعليقات مساحة العمل وحذفها وتكرارها باستخدام التعليمة البرمجية التالية:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
يمكنك أيضًا إنشاء خيارات قائمة السياق الخاصة بك، أو إضافة طريقة أخرى للمستخدم لإضافة تعليقات مساحة العمل. لمزيد من المعلومات حول خيارات قائمة السياق، راجِع قوائم السياق.
تخصيص التعليقات مرئيًا
تتوفّر عدة طرق لتخصيص مظهر تعليقات Workspace. وتستخدم هذه الصفحات CSS وليس المظاهر. من الممكن التحكم في معظم ألوان وأحجام الأجزاء المختلفة من التعليق، ولكن ليس في كيفية وضعها.
متغيرات CSS للألوان
يمكنك ضبط متغير css commentFillColour لتغيير لون خلفية منطقة النص. يمكنك ضبط متغيّر css commentBorderColour لتغيير لون الشريط العلوي للتعليق وحدوده.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
فئات CSS
هناك فئات css مختلفة مخصصة لعناصر مختلفة في طريقة عرض التعليقات، والتي تسمح لك بتعديل نمط العناصر.
| فئات CSS | صورة |
|---|---|
| openlyComment, blocklyDraggable | 
|
| blocklySelected وblocklyCommenthighlight |  
|
| 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>. وهذا يعني أنّه إذا أردت تغيير لون رمز أو شكله، يمكنك تضمين صورة مختلفة في مجلد الوسائط.
| اسم الصورة | صورة |
|---|---|
| Foldout-arrow.svg | |
| حذف-icon.svg | |
| resize-handle.svg | |
رمز الحذف
يكون رمز الحذف مخفيًا بشكل تلقائي. إذا كنت ترغب في تفعيله، عليك استخدام CSS لإظهاره:
.blocklyDeleteIcon {
display: block;
}