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

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

CSS دسته

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

به‌طور پیش‌فرض، همه قسمت‌های یک نوع (مثلاً همه برچسب‌ها) به یک کلاس CSS اختصاص داده می‌شوند. اگر می خواهید تمام قسمت های یک نوع را به یک شکل استایل کنید از این کلاس استفاده کنید. به عنوان مثال، شما می خواهید همه برچسب ها یک رنگ داشته باشند.

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

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

نوع قطعه	توضیحات	کلاس CSS پیش فرض
مطالب	div که شامل همه دسته ها است.	blocklyToolboxCategoryGroup
ظرف	div که شامل یک دسته و زیرمجموعه های آن است.	blocklyToolboxCategoryContainer
ردیف	div که شامل دسته است.	blocklyToolboxCategory
rowcontentcontainer	div که حاوی برچسب و نماد است.	blocklyTreeRowContentContainer
نماد	span که شامل نماد است.	blocklyToolboxCategoryIcon
برچسب زدن	span ای که حاوی برچسب است.	blocklyToolboxCategoryLabel
انتخاب شده است	هنگامی که دسته انتخاب می شود به div "ردیف" اضافه می شود.	blocklyToolboxSelected
openicon	هنگامی که یک دسته با زیرمجموعه باز است به span "نماد" اضافه می شود.	blocklyToolboxCategoryIconOpen
نماد بسته	هنگامی که یک دسته با زیرمجموعه بسته می شود به span "نماد" اضافه می شود.	blocklyToolboxCategoryIconClosed

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

ابتدا، کلاس‌های CSS سفارشی را در JSON یا XML که دسته‌های شما را تعریف می‌کند، اختصاص دهید:

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

XML

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

تم ها

توجه: در حالی که تم ها پشتیبانی می شوند، توصیه می کنیم از CSS به جای تم ها برای استایل دادن به دسته های خود استفاده کنید.

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

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

JSON

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

XML

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

رنگ ها

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

JSON

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

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