এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

বিভাগ চেহারা

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

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

CSS বিভাগ

আপনি ক্যাটাগরি টুলবক্স স্টাইল করতে CSS ব্যবহার করতে পারেন। প্রতিটি বিভাগের জন্য এন্ট্রি একাধিক অংশে বিভক্ত, যেমন এর আইকন, এর লেবেল এবং আইকন এবং লেবেল ধারণকারী সারি। আপনি পৃথকভাবে প্রতিটি অংশ স্টাইল করতে পারেন।

ডিফল্টরূপে, একই ধরণের সমস্ত অংশ (যেমন সমস্ত লেবেল) একই CSS ক্লাস বরাদ্দ করা হয়। আপনি যদি একই ধরণের সমস্ত অংশকে একইভাবে স্টাইল করতে চান তবে এই ক্লাসটি ব্যবহার করুন। উদাহরণস্বরূপ, আপনি চান যে সমস্ত লেবেল একই রঙের হোক।

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

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

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

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

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

দুটি বিভাগ সহ একটি টুলবক্স। বিভাগ লেবেল উভয় সাদা, কিন্তু তাদের পটভূমির রং ভিন্ন।

প্রথমে, JSON বা XML-এ কাস্টম CSS ক্লাস বরাদ্দ করুন যা আপনার বিভাগগুলিকে সংজ্ঞায়িত করে:

JSON

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

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "yourRow"
  },
  "contents": [...],
},

এক্সএমএল

একটি অ্যাট্রিবিউট ব্যবহার করে কাস্টম CSS ক্লাস সেট করুন যার নাম css- এর সাথে যুক্ত অংশের ধরন।

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="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>

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