বিভাগ চেহারা

ব্লকলি একটি ডিফল্ট ক্যাটাগরি UI প্রদান করে, এবং এর সাথে স্টাইলিংয়ের জন্য কিছু মৌলিক বিকল্পও রয়েছে। UI এর আরও উন্নত স্টাইলিং/কনফিগারেশন কীভাবে করবেন সে সম্পর্কে তথ্য জানতে চাইলে কোডল্যাব কাস্টমাইজিং এ ব্লকলি টুলবক্স এবং 2021 টুলবক্স API গুলি সম্পর্কে আলোচনা দেখুন।

ছয়টি বিভাগ সহ একটি বিভাগ টুলবক্স। ভেরিয়েবল বিভাগটি খোলা এবং এতে ভেরিয়েবল গেটার এবং সেটার ব্লক রয়েছে। ব্লকগুলির রঙ ভেরিয়েবল বিভাগের নামের বাম দিকে উল্লম্ব বারের রঙের সাথে মিলে যায়।

বিভাগ সিএসএস

আপনি ক্যাটাগরি টুলবক্স স্টাইল করতে CSS ব্যবহার করতে পারেন।

একটি ক্যাটাগরি টুলবক্স একাধিক HTML উপাদানের সমন্বয়ে গঠিত, যার প্রতিটি টুলবক্সের একটি ভিন্ন অংশকে মডেল করে। উদাহরণস্বরূপ, প্রতিটি বিভাগের নিজস্ব div এবং আইকন এবং লেবেলের জন্য পৃথক span s থাকে। (সম্পূর্ণ তালিকার জন্য, নীচের টেবিলটি দেখুন।)

Blockly একই ধরণের সকল অংশের জন্য একটি ডিফল্ট CSS ক্লাস বরাদ্দ করে। উদাহরণস্বরূপ, এটি সমস্ত লেবেল span জন্য blocklyToolboxCategoryLabel বরাদ্দ করে। একই ধরণের সকল অংশকে একইভাবে স্টাইল করতে এই ক্লাসগুলি ব্যবহার করুন, যেমন সমস্ত লেবেলে একই রঙ নির্ধারণ করা। Blockly ক্যাটাগরি টুলবক্সের জন্য তার ডিফল্ট CSS- এ এই ক্লাসগুলি ব্যবহার করে।

আপনি ঐচ্ছিকভাবে পৃথক অংশে কাস্টম CSS ক্লাস বরাদ্দ করতে পারেন। উদাহরণস্বরূপ, আপনি প্রতিটি লেবেল span জন্য বিভিন্ন CSS ক্লাস বরাদ্দ করতে পারেন। একই ধরণের বিভিন্ন অংশকে বিভিন্ন উপায়ে স্টাইল করতে এই ক্লাসগুলি ব্যবহার করুন, যেমন প্রতিটি লেবেলে একটি ভিন্ন রঙ নির্ধারণ করা।

ডিফল্ট CSS ক্লাস

নিম্নলিখিত টেবিলে একটি ক্যাটাগরি টুলবক্সের প্রতিটি অংশের ধরণ, বিবরণ এবং ডিফল্ট CSS ক্লাস তালিকাভুক্ত করা হয়েছে। যদি আপনার এটি কল্পনা করতে সমস্যা হয়, তাহলে আপনার ব্রাউজারে ডেভেলপার টুলগুলি খুলুন এবং টুলবক্সটি পরীক্ষা করুন।

অংশের ধরণ	বিবরণ	ডিফল্ট CSS ক্লাস
বিষয়বস্তু	যে `div` সকল বিভাগ রয়েছে।	`blocklyToolboxCategoryGroup`
ধারক	যে `div` একটি একক বিভাগ এবং তার উপবিভাগ রয়েছে।	`blocklyToolboxCategoryContainer`
সারি	যে `div` বিভাগটি রয়েছে।	`blocklyToolboxCategory`
সারি কন্টেন্টকন্টেইনার	যে `div` লেবেল এবং আইকন রয়েছে।	`blocklyTreeRowContentContainer`
আইকন	যে `span` আইকনটি রয়েছে।	`blocklyToolboxCategoryIcon`
লেবেল	লেবেলটি ধারণকারী `span` ।	`blocklyToolboxCategoryLabel`

টুলবক্সের কিছু অংশের অবস্থা চিহ্নিত করতেও CSS ব্যবহার করা হয়।

রাজ্য	বিবরণ	ডিফল্ট CSS ক্লাস
নির্বাচিত	বিভাগটি নির্বাচন করা হলে "সারি" `div` যোগ করা হয়।	`blocklyToolboxSelected`
ওপেনআইকন	উপবিভাগ সহ একটি বিভাগ খোলা থাকলে "আইকন" `span` যোগ করা হয়।	`blocklyToolboxCategoryIconOpen`
ক্লোজড আইকন	উপবিভাগ সহ একটি বিভাগ বন্ধ করা হলে "আইকন" `span` যোগ করা হয়।	`blocklyToolboxCategoryIconClosed`

কাস্টম CSS ক্লাস

কাস্টম CSS ক্লাস বরাদ্দ করতে, JSON টুলবক্স সংজ্ঞায় cssConfig প্রপার্টি অথবা XML টুলবক্স সংজ্ঞায় css- অ্যাট্রিবিউট ব্যবহার করুন এবং আপনি যে অংশে ক্লাস বরাদ্দ করতে চান তা সনাক্ত করতে পার্ট টাইপ ব্যবহার করুন।

উদাহরণস্বরূপ, ধরুন আপনি চান যে সমস্ত লেবেল সাদা হোক কিন্তু প্রতিটি বিভাগের নিজস্ব ব্যাকগ্রাউন্ড রঙ হোক। আপনি লেবেলের জন্য ডিফল্ট ক্লাস ব্যবহার করতে পারেন, তবে প্রতিটি বিভাগের সারির জন্য কাস্টম ক্লাস যোগ করতে হবে।

দুটি বিভাগ সহ একটি টুলবক্স। বিভাগের লেবেল দুটি সাদা, কিন্তু তাদের পটভূমির রঙ আলাদা।

নিম্নলিখিত ক্যাটাগরি সংজ্ঞাগুলি প্রতিটি ক্যাটাগরির সারিতে কাস্টম CSS ক্লাস নির্ধারণ করে। লক্ষ্য করুন যে প্রতিটি সংজ্ঞায় সারির জন্য ডিফল্ট ক্লাস ( blocklyToolboxCategory ) অন্তর্ভুক্ত করা হয়েছে। কারণ ক্লাস নির্ধারণের সময় Blockly সারির class অ্যাট্রিবিউটকে ওভাররাইট করে। আপনি যদি ডিফল্ট ক্লাস অন্তর্ভুক্ত না করেন, তাহলে আপনি সেই ক্লাসের জন্য ডিফল্ট CSS পাবেন না।

JSON সম্পর্কে

cssConfig প্রপার্টি ব্যবহার করে কাস্টম CSS ক্লাস সেট করুন।

{
  "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": [...],
},

এক্সএমএল

এমন একটি অ্যাট্রিবিউট ব্যবহার করে কাস্টম 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}

থিম

থিমগুলি আপনাকে আপনার কর্মক্ষেত্রের সমস্ত রঙ একসাথে নির্দিষ্ট করতে দেয়, যার মধ্যে আপনার বিভাগের রঙও রয়েছে।

এগুলি ব্যবহার করার জন্য, আপনাকে আপনার বিভাগটিকে একটি নির্দিষ্ট বিভাগ শৈলীর সাথে যুক্ত করতে হবে:

JSON সম্পর্কে

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

এক্সএমএল

<category name="Logic" categorystyle="logic_category"></category>

রঙ

আপনি সরাসরি রঙও নির্দিষ্ট করতে পারেন, তবে এটি সুপারিশ করা হয় না। রঙটি একটি স্ট্রিংযুক্ত সংখ্যা (0-360) যা রঙটি নির্দিষ্ট করে। ব্রিটিশ বানানটি লক্ষ্য করুন।

JSON সম্পর্কে

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

এক্সএমএল

<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>

মনে রাখবেন যে আমরা স্থানীয়করণযোগ্য রঙের রেফারেন্স ব্যবহারও সমর্থন করি।