কর্মক্ষেত্র মন্তব্য

একটি ওয়ার্কস্পেস মন্তব্য একটি গ্রাফিকাল উপাদান যা আপনি পাঠ্য লিখতে পারেন। সাধারণত এটি আপনার কোড সম্পর্কে কিছু নথিভুক্ত করতে ব্যবহৃত হয়, ঠিক যেমন একটি পাঠ্য-ভিত্তিক প্রোগ্রামিং ভাষার মন্তব্য।

দ্রষ্টব্য: ফ্লাইআউটে ওয়ার্কস্পেস মন্তব্য যোগ করা যাবে না।

কর্মক্ষেত্র মন্তব্য সক্রিয় করুন

আপনার অ্যাপ্লিকেশনে ওয়ার্কস্পেস মন্তব্যগুলি সক্ষম করতে, আপনাকে ব্যবহারকারীদের সেগুলি তৈরি করার কিছু উপায় দিতে হবে। এটি করার একটি উপায় হল একটি প্রসঙ্গ মেনু আইটেম যোগ করা যা একটি ওয়ার্কস্পেস মন্তব্য তৈরি করে। আপনি নিম্নোক্ত কোডের সাথে ওয়ার্কস্পেস মন্তব্য তৈরি করতে, মুছে ফেলতে এবং নকল করতে ডিফল্ট প্রসঙ্গ মেনু আইটেম নিবন্ধন করতে পারেন:

// 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 ভেরিয়েবল সেট করতে পারেন। আপনি মন্তব্য শীর্ষ বারের রঙ এবং মন্তব্যের সীমানা পরিবর্তন করতে commentBorderColour CSS ভেরিয়েবল সেট করতে পারেন।

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

CSS ক্লাস

মন্তব্য দর্শনের বিভিন্ন উপাদানের জন্য বিভিন্ন CSS ক্লাস বরাদ্দ করা হয়েছে, যা আপনাকে উপাদানগুলির স্টাইল পরিবর্তন করতে দেয়।

CSS ক্লাস(গুলি)	ছবি
ব্লকলি কমেন্ট, ব্লকলি টেনে নেওয়া যায়
ব্লকলি সিলেক্টেড, ব্লকলি কমেন্ট হাইলাইট
ব্লকলি সঙ্কুচিত
ব্লকলিকমেন্টটপবার
ব্লকলিফল্ডআউট আইকন
blocklyCommentPreview, 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-এর পরিবর্তনের জন্য প্রয়োগ করা উচিত তা নির্ভর করে মন্তব্যটি ভেঙে গেছে কিনা তার উপর নির্ভর করে। এটি ভেঙে গেলে, আপনি blocklyCommentTopbarBackground এ CSS প্রয়োগ করুন, অন্যথায় 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
delete-icon.svg
resize-handle.svg

আইকন মুছুন

ডিলিট আইকনটি ডিফল্টরূপে লুকানো থাকে। আপনি যদি এটি সক্ষম করতে চান তবে এটি দৃশ্যমান করতে আপনাকে CSS ব্যবহার করতে হবে:

.blocklyDeleteIcon {
  display: block;
}