カテゴリの表示

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

カテゴリ CSS

CSS を使用してカテゴリ ツールボックスのスタイルを設定できます。

カテゴリ ツールボックスは複数の HTML 要素で構成され、各要素はツールボックスの異なる部分をモデル化します。たとえば、各カテゴリには独自の div があり、アイコンとラベル用に個別の span があります。（完全なリストについては、以下の表をご覧ください）。

Blockly は、同じタイプのすべての部分にデフォルトの CSS クラスを割り当てます。たとえば、すべてのラベル span に blocklyToolboxCategoryLabel を割り当てます。これらのクラスを使用すると、同じタイプのすべての部分を同じようにスタイル設定できます。たとえば、すべてのラベルに同じ色を割り当てることができます。Blockly は、カテゴリ ツールボックスのデフォルトの CSS でこれらのクラスを使用します。

必要に応じて、個々のパーツにカスタム CSS クラスを割り当てることができます。たとえば、各ラベルに異なる CSS クラスを割り当てることができます。spanこれらのクラスを使用して、同じタイプのさまざまな部分を異なる方法でスタイル設定します（各ラベルに異なる色を割り当てるなど）。

デフォルトの CSS クラス

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

部分タイプ	説明	デフォルトの CSS クラス
コンテンツ	すべてのカテゴリを含む div。	blocklyToolboxCategoryGroup
コンテナ	単一のカテゴリとそのサブカテゴリを含む div。	blocklyToolboxCategoryContainer
行	カテゴリを含む div。	blocklyToolboxCategory
rowcontentcontainer	ラベルとアイコンを含む div。	blocklyTreeRowContentContainer
アイコン	アイコンを含む span。	blocklyToolboxCategoryIcon
ラベル	ラベルを含む span。	blocklyToolboxCategoryLabel

CSS は、ツールボックスの一部の状態にラベルを付けるためにも使用されます。

州	説明	デフォルトの CSS クラス
選択済み	カテゴリが選択されると、div の「行」に追加されます。	blocklyToolboxSelected
openicon	サブカテゴリを含むカテゴリが開いているときに、「icon」span に追加されます。	blocklyToolboxCategoryIconOpen
closedicon	サブカテゴリを含むカテゴリが閉じられたときに、「icon」span に追加されます。	blocklyToolboxCategoryIconClosed

カスタム CSS クラス

カスタム CSS クラスを割り当てるには、JSON ツールボックス定義の cssConfig プロパティまたは XML ツールボックス定義の css- 属性を使用し、パートタイプを使用してクラスを割り当てるパートを特定します。

たとえば、すべてのラベルを白にし、カテゴリごとに背景色を設定するとします。ラベルにはデフォルトのクラスを使用できますが、カテゴリの行ごとにカスタムクラスを追加する必要があります。

次のカテゴリ定義では、各カテゴリの行にカスタム CSS クラスを割り当てています。行のデフォルト クラス（blocklyToolboxCategory）が各定義に含まれていることに注意してください。これは、Blockly がクラスを割り当てるときに行の class 属性を上書きするためです。デフォルトのクラスを含めないと、そのクラスのデフォルトの CSS は取得されません。

JSON

cssConfig プロパティを使用してカスタム CSS クラスを設定します。

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

テーマ

テーマを使用すると、カテゴリの色など、ワークスペースのすべての色を一度に指定できます。よりきめ細かい制御が必要な場合は、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>

ローカライズ可能な色参照の使用もサポートされています。