বিভাগ চেহারা

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

থিম

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

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

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>

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

CSS বিভাগ

আপনি যদি আরও শক্তিশালী কাস্টমাইজেশন চান, ব্লকলি আপনাকে ডিফল্ট UI এর বিভিন্ন উপাদানের জন্য CSS ক্লাস নির্দিষ্ট করার অনুমতি দেয়। আপনি তারপর এই স্টাইল করতে CSS ব্যবহার করতে পারেন.

নিম্নলিখিত উপাদানের ধরনগুলিতে CSS ক্লাস প্রয়োগ করা যেতে পারে:

• ধারক - বিভাগের জন্য অভিভাবক ডিভের জন্য ক্লাস। ডিফল্ট blocklyToolboxCategory .
• সারি - বিভাগ লেবেল এবং আইকন ধারণকারী div-এর জন্য ক্লাস। ডিফল্ট blocklyTreeRow ।
• আইকন - বিভাগ আইকনের জন্য ক্লাস। ডিফল্ট blocklyTreeIcon ।
• লেবেল - বিভাগ লেবেলের জন্য ক্লাস। ডিফল্ট blocklyTreeLabel ।
• নির্বাচিত - যে শ্রেণীটি নির্বাচন করার সময় বিভাগে যোগ করা হয়। ডিফল্ট blocklyTreeSelected সিলেক্টেড।
• openicon - যখন বিভাগে নেস্ট করা বিভাগ থাকে এবং খোলা থাকে তখন একটি আইকনে ক্লাস যোগ করা হয়। ডিফল্ট blocklyTreeIconOpen ।
• ক্লোজডিকন - যখন ক্যাটাগরিতে নেস্টেড ক্যাটাগরি থাকে এবং বন্ধ থাকে তখন একটি আইকনে ক্লাস যোগ করা হয়। ডিফল্ট blocklyTreeIconClosed .

এবং এখানে আপনি যে কোনও ফর্ম্যাট ব্যবহার করে ক্লাসগুলি কীভাবে নির্দিষ্ট করবেন:

JSON এক্সএমএল

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

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

একটি নির্দিষ্ট এলিমেন্ট টাইপের CSS ক্লাস সেট করুন এটিতে 'css-' পূর্বে রেখে।

<category name="..." css-container="yourClassName"></category>