カテゴリの表示

Blockly にはデフォルトのカテゴリ UI が用意されており、それを使用して基本的なスタイリング オプションを設定できます。UI のより高度なスタイル設定や構成を行う方法については、Blockly ツールボックスのカスタマイズに関する Codelab と 2021 年のツールボックス API に関するトークをご覧ください。

6 つのカテゴリを含むカテゴリ ツールボックス。[変数] カテゴリが開き、変数のゲッター ブロックとセッター ブロックが表示されます。ブロックの色は、[変数] カテゴリ名の左側にある縦棒の色と一致します。

カテゴリ CSS

CSS を使用してカテゴリ ツールボックスのスタイルを設定できます。各カテゴリのエントリは、アイコン、ラベル、アイコンとラベルを含む行など、複数の部分に分割されます。各部分のスタイルを個別に設定できます。

デフォルトでは、同じタイプのすべての部分（すべてのラベルなど）に同じ CSS クラスが割り当てられます。同じタイプのすべての部分を同じようにスタイル設定する場合は、このクラスを使用します。たとえば、すべてのラベルを同じ色にしたい場合などです。

各パーツに独自の CSS クラスを割り当てることもできます。個々のパーツのスタイルを別々に設定する場合は、この方法を使用します。たとえば、ラベルごとに異なる色を設定したい場合などです。

次の表に、カテゴリ ツールボックスの各部分のタイプ、説明、デフォルトの CSS クラスを示します。この視覚化が難しい場合は、ブラウザでデベロッパー ツールを開き、ツールボックスを調べてください。

部分タイプ 説明 デフォルトの CSS クラス
コンテンツ すべてのカテゴリを含む div。 blocklyToolboxCategoryGroup
コンテナ 単一のカテゴリとそのサブカテゴリを含む div。 blocklyToolboxCategoryContainer
行 カテゴリを含む div。 blocklyToolboxCategory
rowcontentcontainer ラベルとアイコンを含む div。 blocklyTreeRowContentContainer
アイコン アイコンを含む span。 blocklyToolboxCategoryIcon
ラベル ラベルを含む span。 blocklyToolboxCategoryLabel
選択済み カテゴリが選択されると、[行] div に追加されます。 blocklyToolboxSelected
openicon サブカテゴリを含むカテゴリが開いているときに、「icon」span に追加されます。 blocklyToolboxCategoryIconOpen
closedicon サブカテゴリを含むカテゴリが閉じられたときに、「icon」span に追加されます。 blocklyToolboxCategoryIconClosed

たとえば、すべてのラベルを白にしたいが、各カテゴリの行には独自の背景色を設定したいとします。これを行うには、各行にカスタム CSS クラスが必要です。ラベルにはデフォルトのクラスを使用できます。

2 つのカテゴリを含むツールボックス。カテゴリ ラベルはどちらも白ですが、背景色が異なります。

まず、カテゴリを定義する 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": [...],
},

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}

テーマ

テーマを使用すると、カテゴリの色など、ワークスペースのすべての色を一度に指定できます。

これらを使用するには、カテゴリを特定のカテゴリ スタイルに関連付ける必要があります。

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>

ローカライズ可能な色参照も使用できます。