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

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 "строка" при выборе категории. blocklyToolboxSelected
открытая иконка Добавляется в span с иконкой, когда открыта категория с подкатегориями. blocklyToolboxCategoryIconOpen
закрытая иконка Добавляется в span словом "icon", когда категория с подкатегориями закрыта. 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}

Темы

Темы оформления позволяют одновременно задать все цвета рабочего пространства, включая цвета категорий. Для более точной настройки используйте 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>

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