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

Blockly предоставляет стандартный пользовательский интерфейс с категориями и некоторыми базовыми возможностями стилизации. Если вам нужна информация о более продвинутом оформлении/настройке пользовательского интерфейса, ознакомьтесь с практической работой по настройке панели инструментов Blockly и докладом по API панели инструментов 2021 года .

Панель инструментов категории с шестью категориями. Категория «Переменные» открыта и содержит блоки получения и установки значений переменных. Цвет блоков соответствует цвету вертикальной полосы слева от названия категории «Переменные».

Категория CSS

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

По умолчанию всем элементам одного типа (например, всем меткам) назначается один и тот же CSS-класс. Используйте этот класс, если хотите оформить все элементы одного типа одинаково. Например, если вы хотите, чтобы все метки имели один и тот же цвет.

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

В следующей таблице перечислены типы, описания и CSS-классы по умолчанию для каждой части панели инструментов категории. Если вам сложно визуализировать это, откройте инструменты разработчика в браузере и изучите панель инструментов.

Тип детали Описание CSS-класс по умолчанию
содержимое div , содержащий все категории. blocklyToolboxCategoryGroup
контейнер div , содержащий одну категорию и ее подкатегории. blocklyToolboxCategoryContainer
ряд div , содержащий категорию. blocklyToolboxCategory
rowcontentcontainer div , содержащий метку и значок. blocklyTreeRowContentContainer
икона span , содержащий значок. blocklyToolboxCategoryIcon
этикетка span , содержащий метку. blocklyToolboxCategoryLabel
выбранный Добавляется в div «row» при выборе категории. blocklyToolboxSelected
openicon Добавляется в span «значок», когда открыта категория с подкатегориями. blocklyToolboxCategoryIconOpen
закрытозначок Добавляется в span «значок», когда категория с подкатегориями закрыта. blocklyToolboxCategoryIconClosed

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

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

Сначала назначьте пользовательские классы CSS в JSON или XML, которые определяют ваши категории:

JSON

Установите пользовательские классы CSS с помощью свойства cssConfig .

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

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