Эта страница переведена с помощью Cloud Translation API.

Темы

Темы — это способ настроить внешний вид Blockly. Вы можете настроить цвета блоков, категорий и некоторые компоненты с помощью класса Themes . Если вы хотите настроить дополнительные компоненты, мы предоставляем название темы в виде класса в блоке div . Это позволяет пользователям изменять внешний вид любых неподдерживаемых компонентов с помощью CSS. Наша главная цель при создании тем — дать разработчикам возможность создавать более доступный интерфейс Blockly.

Свойства темы

Тема — это объект с несколькими свойствами: базовая тема, от которой требуется расшириться, объект стиля для блоков, категорий, компонентов и шрифтов, а также указание, использовать ли шапки для начальных блоков.

Блочный стиль

Блочный стиль состоит из четырех полей:

colourPrimary (обязательно) — цвет фона блока.
colourSecondary (необязательно) — цвет фона, если блок является теневым.
colourTertiary (необязательно) — цвет границы или выделения блока.
hat (необязательно) — добавляет шляпу к блоку, если задано значение cap . Подробнее о шляпах .

Блок со стрелками, указывающими на первичный, вторичный и третичный цвет

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Тема будет включать сопоставление имени стиля блока с объектом стиля блока:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Категория Стиль

Стиль категории содержит только свойство цвета.

Цвет (обязательно) — цвет категории на панели инструментов. Обычно эти цвета должны совпадать с colourPrimary большинства блоков в категории. Это позволяет пользователям легко определить, какие блоки относятся к данной категории.

Скриншот панели инструментов с разными цветами категорий

const mathCategory = {
   'colour':'290'
}

Тема будет включать сопоставление названия категории с объектом стиля категории:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Стили компонентов

Тема может задать цвет или значение следующих компонентов:

workspaceBackgroundColour : цвет фона рабочего пространства.
toolboxBackgroundColour : цвет фона панели инструментов
toolboxForegroundColour : Цвет текста категории панели инструментов
flyoutBackgroundColour : цвет фона всплывающей подсказки
flyoutForegroundColour : Цвет текста метки всплывающей подсказки
flyoutOpacity : Непрозрачность всплывающего окна
scrollbarColour : Цвет полосы прокрутки
scrollbarOpacity : Непрозрачность полосы прокрутки
insertionMarkerColour : Цвет маркера вставки (не принимает названия цветов)
insertionMarkerOpacity : непрозрачность маркера вставки
markerColour : цвет маркера, отображаемого в режиме навигации с помощью клавиатуры.
cursorColour : Цвет курсора, отображаемого в режиме навигации с помощью клавиатуры.

Большинство других компонентов можно изменить, используя название темы в CSS. Однако, если вы хотите изменить какой-либо компонент, который ещё не входит в этот список и не может быть изменён с помощью CSS, пожалуйста, сообщите нам об этом , предоставив дополнительную информацию.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Стили шрифтов

Стиль шрифта — это объект, который содержит семейство, насыщенность и размер шрифта.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Стартовые шляпы

Если задать startHats: true непосредственно в объекте темы, шляпа будет добавлена ко всем блокам без предыдущих или исходящих соединений. Если вам нужен больший контроль над тем, какие именно блоки будут получать шляпу, можно использовать свойство стиля блока .

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

Чтобы добавить тему в приложение Blockly, вам необходимо сделать следующее:

Создать тему
Добавить названия стилей
Установите свою тему на рабочем месте

Создать тему

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

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

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Вот пример использования defineTheme .

Добавить названия стилей

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

Категории

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

JSON

{
 "kind": "category",
 "name": "Logic",
 "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Блоки

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

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Установите свою тему

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

Начальная тема

Лучший способ задать начальную тему — включить параметр конфигурации theme в вызов Blockly.inject . Тему можно указать в формате JSON или JavaScript.

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

Blockly.inject('blocklyDiv', {
  theme: Blockly.Theme.defineTheme('themeName', {
     'blockStyles': blockStyles,
     'categoryStyles': categoryStyles,
     'componentStyles': componentStyles
  }),
  ...
});

Если тема не указана, то по умолчанию будет использоваться классическая тема .

Динамические темы

Если вы хотите динамически изменять тему (например, в случае, если вы хотите разрешить пользователям выбирать тему из раскрывающегося меню), то вы можете вызвать yourWorkspace.setTheme(theme) .

Создать скрипт стилей блока

Blockly предоставляет скрипт, который принимает карту оттенков или шестнадцатеричные значения и рассчитывает для них вторичные и третичные цвета. Скрипт находится в папке scripts/themes .

Встроенные темы

Blockly предлагает ряд тем для обеспечения доступности, в частности, для людей с определенными типами нарушений цветового зрения:

У нас также есть:

Классическая тема
Современный
Темный режим

Темы Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Свойства темы

Блочный стиль

Категория Стиль

Стили компонентов

Стили шрифтов

Стартовые шляпы

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

Создать тему

Добавить названия стилей

Категории

JSON

XML

Блоки

JSON

JavaScript

Установите свою тему

Начальная тема

JSON

JavaScript

Динамические темы

Создать скрипт стилей блока

Встроенные темы

Темы