카테고리 노출

Blockly는 기본 카테고리 UI를 제공하며, 이를 통해 스타일 지정에 관한 몇 가지 기본 옵션을 사용할 수 있습니다. UI의 고급 스타일 지정/구성 방법에 관한 정보는 Blockly 도구 상자 맞춤설정 Codelab 및 2021 도구 상자 API 강연을 참고하세요.

6개의 카테고리가 있는 카테고리 도구 상자 변수 카테고리가 열려 있으며 변수 getter 및 setter 블록이 포함되어 있습니다. 블록의 색상은 변수 카테고리 이름 왼쪽에 있는 세로 막대의 색상과 일치합니다.

카테고리 CSS

CSS를 사용하여 카테고리 도구 상자의 스타일을 지정할 수 있습니다. 각 카테고리의 항목은 아이콘, 라벨, 아이콘과 라벨이 포함된 행 등 여러 부분으로 나뉩니다. 각 부분을 개별적으로 스타일 지정할 수 있습니다.

기본적으로 동일한 유형의 모든 부분 (예: 모든 라벨)에 동일한 CSS 클래스가 할당됩니다. 동일한 유형의 모든 부분을 동일한 방식으로 스타일을 지정하려면 이 클래스를 사용하세요. 예를 들어 모든 라벨의 색상을 동일하게 지정하려고 합니다.

각 개별 부분에 자체 CSS 클래스를 할당할 수도 있습니다. 개별 부분을 다르게 스타일 지정하려면 이 방법을 사용하세요. 예를 들어 각 라벨에 고유한 색상을 지정할 수 있습니다.

다음 표에는 카테고리 도구 상자의 각 부분의 유형, 설명, 기본 CSS 클래스가 나와 있습니다. 이 내용을 시각화하는 데 문제가 있다면 브라우저에서 개발자 도구를 열고 도구 상자를 검사하세요.

부품 유형 설명 기본 CSS 클래스
콘텐츠 모든 카테고리가 포함된 div입니다. blocklyToolboxCategoryGroup
컨테이너 단일 카테고리와 하위 카테고리를 포함하는 div입니다. blocklyToolboxCategoryContainer
행 카테고리가 포함된 div blocklyToolboxCategory
rowcontentcontainer 라벨과 아이콘이 포함된 div blocklyTreeRowContentContainer
아이콘 아이콘이 포함된 span입니다. blocklyToolboxCategoryIcon
라벨 라벨이 포함된 span입니다. blocklyToolboxCategoryLabel
선택됨 카테고리를 선택하면 '행' div에 추가됩니다. blocklyToolboxSelected
openicon 하위 카테고리가 있는 카테고리가 열리면 '아이콘' span에 추가됩니다. blocklyToolboxCategoryIconOpen
closedicon 하위 카테고리가 있는 카테고리가 닫힐 때 '아이콘' span에 추가됩니다. blocklyToolboxCategoryIconClosed

예를 들어 모든 라벨은 흰색으로 표시하고 각 카테고리의 행에는 자체 배경색을 적용하고 싶다고 가정해 보겠습니다. 이렇게 하려면 각 행에 맞춤 CSS 클래스가 필요합니다. 라벨에 기본 클래스를 사용할 수 있습니다.

두 가지 카테고리가 있는 도구 상자 카테고리 라벨은 모두 흰색이지만 배경색은 다릅니다.

먼저 카테고리를 정의하는 JSON 또는 XML에서 맞춤 CSS 클래스를 할당합니다.

JSON

cssConfig 속성을 사용하여 맞춤 CSS 클래스를 설정합니다.

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

현지화 가능한 색상 참조 사용도 지원됩니다.