カテゴリの表示

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

カテゴリ CSS

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

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

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

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

デフォルトの CSS クラス

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

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

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

州	説明	デフォルトの CSS クラス
選択済み	カテゴリが選択されると、「行」の div に追加されます。	blocklyToolboxSelected
openicon	サブカテゴリを含むカテゴリが開くと、「アイコン」の span に追加されます。	blocklyToolboxCategoryIconOpen
closedicon	サブカテゴリを含むカテゴリが閉じると、「アイコン」の 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>

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