ظاهر دسته بندی,ظاهر دسته بندی,ظاهر دسته بندی,ظاهر دسته بندی

Blockly یک رابط کاربری پیش‌فرض برای دسته‌بندی‌ها و به همراه آن برخی گزینه‌های اساسی برای استایل‌بندی ارائه می‌دهد. اگر می‌خواهید در مورد نحوه استایل‌بندی/پیکربندی پیشرفته‌تر رابط کاربری اطلاعات کسب کنید، به بخش سفارشی‌سازی جعبه ابزار Blockly و بحث APIهای جعبه ابزار 2021 مراجعه کنید.

یک جعبه ابزار دسته‌بندی با شش دسته‌بندی. دسته‌بندی متغیرها باز است و شامل بلوک‌های دریافت‌کننده و تنظیم‌کننده متغیر است. رنگ بلوک‌ها با رنگ نوار عمودی سمت چپ نام دسته‌بندی متغیرها مطابقت دارد.

دسته‌بندی CSS

شما می‌توانید از CSS برای استایل‌دهی به جعبه ابزارهای دسته‌بندی استفاده کنید.

یک جعبه ابزار دسته‌بندی از چندین عنصر HTML تشکیل شده است که هر کدام بخش متفاوتی از جعبه ابزار را مدل‌سازی می‌کنند. برای مثال، هر دسته div مخصوص به خود و span های جداگانه‌ای برای آیکون و برچسب خود دارد. (برای مشاهده لیست کامل، به جدول زیر مراجعه کنید.)

Blockly یک کلاس CSS پیش‌فرض را به تمام بخش‌های هم نوع اختصاص می‌دهد. برای مثال، blocklyToolboxCategoryLabel را به تمام برچسب‌های span اختصاص می‌دهد. از این کلاس‌ها برای استایل‌دهی به تمام بخش‌های هم نوع به یک روش استفاده کنید، مثلاً برای اختصاص رنگ یکسان به همه برچسب‌ها. Blockly از این کلاس‌ها در CSS پیش‌فرض خود برای جعبه ابزارهای دسته‌بندی استفاده می‌کند.

شما می‌توانید به صورت اختیاری کلاس‌های CSS سفارشی را به بخش‌های جداگانه اختصاص دهید. به عنوان مثال، می‌توانید کلاس‌های CSS متفاوتی را به هر span برچسب اختصاص دهید. از این کلاس‌ها برای استایل‌دهی به بخش‌های مختلف از یک نوع به روش‌های مختلف، مانند اختصاص رنگ متفاوت به هر برچسب، استفاده کنید.

کلاس‌های پیش‌فرض CSS

جدول زیر انواع، توضیحات و کلاس‌های CSS پیش‌فرض هر بخش از جعبه‌ابزار دسته‌بندی را فهرست می‌کند. اگر در تجسم این موارد مشکل دارید، ابزارهای توسعه‌دهنده را در مرورگر خود باز کنید و جعبه‌ابزار را بررسی کنید.

نوع قطعه توضیحات کلاس CSS پیش‌فرض
محتویات div که شامل همه دسته‌ها می‌شود. blocklyToolboxCategoryGroup
ظرف div که شامل یک دسته بندی و زیردسته‌های آن است. blocklyToolboxCategoryContainer
ردیف div که شامل دسته بندی است. blocklyToolboxCategory
کانتینر محتوای ردیف div که شامل برچسب و آیکون است. blocklyTreeRowContentContainer
آیکون span که آیکون در آن قرار دارد. blocklyToolboxCategoryIcon
برچسب span که شامل برچسب است. blocklyToolboxCategoryLabel

CSS همچنین برای برچسب‌گذاری وضعیت برخی از بخش‌های جعبه ابزار استفاده می‌شود.

ایالت توضیحات کلاس CSS پیش‌فرض
انتخاب شده وقتی دسته‌بندی انتخاب می‌شود، به div مربوط به "row" اضافه می‌شود. blocklyToolboxSelected
اوپنیکون وقتی یک دسته‌بندی با زیرمجموعه‌ها باز باشد، به span «آیکون» اضافه می‌شود. blocklyToolboxCategoryIconOpen
آیکون بسته وقتی یک دسته‌بندی با زیرمجموعه‌ها بسته می‌شود، به span «آیکون» اضافه می‌شود. blocklyToolboxCategoryIconClosed

کلاس‌های CSS سفارشی

برای اختصاص کلاس‌های CSS سفارشی، از ویژگی cssConfig در تعاریف جعبه ابزار JSON یا از ویژگی‌های css- در تعاریف جعبه ابزار XML استفاده کنید و از نوع قطعه برای شناسایی قطعه‌ای که می‌خواهید کلاس‌ها را به آن اختصاص دهید، استفاده کنید.

برای مثال، فرض کنید می‌خواهید همه برچسب‌ها سفید باشند اما هر دسته رنگ پس‌زمینه خاص خود را داشته باشد. می‌توانید از کلاس پیش‌فرض برای برچسب‌ها استفاده کنید، اما باید کلاس‌های سفارشی را برای ردیف هر دسته اضافه کنید.

یک جعبه ابزار با دو دسته. برچسب‌های دسته‌ها هر دو سفید هستند، اما رنگ پس‌زمینه آنها متفاوت است.

تعاریف دسته‌بندی زیر، کلاس‌های CSS سفارشی را به هر ردیف از دسته‌بندی اختصاص می‌دهند. توجه داشته باشید که کلاس پیش‌فرض برای ردیف‌ها ( blocklyToolboxCategory ) در هر تعریف گنجانده شده است. دلیل این امر آن است که Blockly هنگام اختصاص کلاس‌ها، ویژگی class ردیف را بازنویسی می‌کند. اگر کلاس پیش‌فرض را وارد نکنید، CSS پیش‌فرض را برای آن کلاس دریافت نخواهید کرد.

جی‌سون

کلاس‌های CSS سفارشی را با استفاده از ویژگی cssConfig تنظیم کنید.

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

XML

کلاس‌های 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}

تم‌ها

تم‌ها به شما این امکان را می‌دهند که تمام رنگ‌های فضای کاری خود، از جمله رنگ‌های دسته‌هایتان را، به طور همزمان مشخص کنید.

برای استفاده از آنها، باید دسته خود را با یک سبک دسته بندی خاص مرتبط کنید:

جی‌سون 

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

XML 

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

رنگ‌ها

همچنین می‌توانید رنگ را مستقیماً مشخص کنید، اما این کار توصیه نمی‌شود. رنگ یک عدد رشته‌ای (0-360) است که رنگمایه را مشخص می‌کند. به املای بریتانیایی آن توجه کنید.

جی‌سون 

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

XML 

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

توجه داشته باشید که ما همچنین از استفاده از ارجاعات رنگی قابل محلی‌سازی پشتیبانی می‌کنیم.