카테고리 노출

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

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

카테고리 CSS

CSS를 사용하여 카테고리 도구 상자의 스타일을 지정할 수 있습니다.

카테고리 도구 상자는 여러 HTML 요소로 구성되며 각 요소는 도구 상자의 다른 부분을 모델링합니다. 예를 들어 각 카테고리에는 자체 div가 있고 아이콘과 라벨에 별도의 span가 있습니다. (전체 목록은 아래 표를 참고하세요.)

Blockly는 동일한 유형의 모든 부분에 기본 CSS 클래스를 할당합니다. 예를 들어 모든 라벨 span에 blocklyToolboxCategoryLabel를 할당합니다. 이러한 클래스를 사용하여 동일한 유형의 모든 부분을 동일한 방식으로 스타일 지정할 수 있습니다(예: 모든 라벨에 동일한 색상 할당). 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
openicon 하위 카테고리가 있는 카테고리가 열리면 '아이콘' span에 추가됩니다. blocklyToolboxCategoryIconOpen
closedicon 하위 카테고리가 있는 카테고리가 닫힐 때 '아이콘' span에 추가되었습니다. blocklyToolboxCategoryIconClosed

맞춤 CSS 클래스

맞춤 CSS 클래스를 할당하려면 JSON 도구 상자 정의의 cssConfig 속성이나 XML 도구 상자 정의의 css- 속성을 사용하고 part 유형을 사용하여 클래스를 할당할 부분을 식별합니다.

예를 들어 모든 라벨은 흰색으로 표시하고 각 카테고리에는 자체 배경색을 지정하고 싶다고 가정해 보겠습니다. 라벨에 기본 클래스를 사용할 수 있지만 각 카테고리 행에 맞춤 클래스를 추가해야 합니다.

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

다음 카테고리 정의는 각 카테고리의 행에 맞춤 CSS 클래스를 할당합니다. 행의 기본 클래스 (blocklyToolboxCategory)가 각 정의에 포함되어 있습니다. 클래스를 할당할 때 Blockly가 행의 class 속성을 덮어쓰기 때문입니다. 기본 클래스를 포함하지 않으면 해당 클래스의 기본 CSS가 표시되지 않습니다.

JSON

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

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

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