Внешний вид категории

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
rowcontentcontainer div , содержащий метку и значок. blocklyTreeRowContentContainer
икона span , содержащий значок. blocklyToolboxCategoryIcon
этикетка span , содержащий метку. blocklyToolboxCategoryLabel

CSS также используется для маркировки состояния некоторых частей панели инструментов.

Состояние Описание CSS-класс по умолчанию
выбранный Добавляется в div «row» при выборе категории. blocklyToolboxSelected
openicon Добавляется в span «значок», когда открыта категория с подкатегориями. blocklyToolboxCategoryIconOpen
закрытозначок Добавляется в span «значок», когда категория с подкатегориями закрыта. blocklyToolboxCategoryIconClosed

Пользовательские CSS-классы

Чтобы назначить пользовательские классы CSS, используйте свойство cssConfig в определениях панели инструментов JSON или атрибуты css- в определениях панели инструментов XML, а также используйте тип части для определения части, которой вы хотите назначить классы.

Например, предположим, что вы хотите, чтобы все метки были белыми, но у каждой категории был свой цвет фона. Вы можете использовать класс по умолчанию для меток, но вам нужно добавить пользовательские классы для каждой строки категории.

Панель инструментов с двумя категориями. Метки обеих категорий белые, но их фон разный.

Следующие определения категорий назначают пользовательские CSS-классы каждой строке категории. Обратите внимание, что класс по умолчанию для строк ( blocklyToolboxCategory ) включен в каждое определение. Это связано с тем, что Blockly перезаписывает атрибут class строки при назначении классов. Если вы не укажете класс по умолчанию, вы не получите CSS-код по умолчанию для этого класса.

JSON

Установите пользовательские классы 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}

Темы

Темы позволяют вам одновременно указать все цвета вашего рабочего пространства, включая цвета ваших категорий.

Чтобы использовать их, вам необходимо связать свою категорию с определенным стилем категории:

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>

Обратите внимание, что мы также поддерживаем использование локализуемых цветовых обозначений .