বিভাগ চেহারা

ব্লকলি একটি ডিফল্ট ক্যাটাগরি UI এবং এর সাথে স্টাইলিংয়ের জন্য কিছু বেসিক অপশন প্রদান করে। আপনি যদি UI-এর আরও অ্যাডভান্সড স্টাইলিং/কনফিগারেশন কীভাবে করবেন সে সম্পর্কে তথ্য চান, তাহলে ‘ Customizing a Blockly toolbox’ কোডল্যাব এবং ‘ 2021 Toolbox APIs talk’ দেখুন।

ক্যাটাগরি সিএসএস

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

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

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 ক্লাস
নির্বাচিত	ক্যাটাগরি নির্বাচন করা হলে "row" div এ এটি যুক্ত করা হয়।	blocklyToolboxSelected
ওপেনআইকন	যখন উপ-বিভাগসহ কোনো বিভাগ খোলা থাকে, তখন এটি 'আইকন' span যুক্ত করা হয়।	blocklyToolboxCategoryIconOpen
বন্ধ আইকন	যখন উপ-বিভাগসহ কোনো বিভাগ বন্ধ করা হয়, তখন এটি 'আইকন' span যুক্ত করা হয়।	blocklyToolboxCategoryIconClosed

কাস্টম সিএসএস ক্লাস

কাস্টম 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}

থিম

থিম আপনাকে আপনার ক্যাটাগরির রঙ সহ আপনার ওয়ার্কস্পেসের সমস্ত রঙ একবারে নির্দিষ্ট করার সুযোগ দেয়। যদি আপনার আরও সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন হয়, তবে CSS ব্যবহার করুন।

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

JSON

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

এক্সএমএল

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

রং

আপনি সরাসরি রঙটিও নির্দিষ্ট করে দিতে পারেন, কিন্তু এটি সুপারিশ করা হয় না। রঙটি হলো একটি স্ট্রিং-এ রূপান্তরিত সংখ্যা (০-৩৬০), যা এর আভা (hue) নির্দেশ করে। ব্রিটিশ বানানটি লক্ষ্য করুন।

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>

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