Giao diện của danh mục

Blockly cung cấp giao diện người dùng danh mục mặc định và một số lựa chọn cơ bản để tạo kiểu. Nếu bạn muốn biết thông tin về cách tạo kiểu/định cấu hình nâng cao hơn cho giao diện người dùng, hãy xem Lớp học lập trình Tuỳ chỉnh hộp công cụ Blockly và Bài nói về API hộp công cụ năm 2021.

Một hộp dụng cụ danh mục có 6 danh mục. Danh mục Variables (Biến) sẽ mở và chứa các khối getter và setter biến. Màu của các khối khớp với màu của thanh dọc ở bên trái tên danh mục Biến.

CSS theo danh mục

Bạn có thể dùng CSS để tạo kiểu cho hộp công cụ danh mục. Mục nhập cho mỗi danh mục được chia thành nhiều phần, chẳng hạn như biểu tượng, nhãn và hàng chứa biểu tượng và nhãn. Bạn có thể tạo kiểu riêng cho từng phần.

Theo mặc định, tất cả các phần thuộc cùng một loại (ví dụ: tất cả nhãn) đều được chỉ định cùng một lớp CSS. Sử dụng lớp này nếu bạn muốn tạo kiểu cho tất cả các phần có cùng loại theo cùng một cách. Ví dụ: bạn muốn tất cả nhãn đều có cùng một màu.

Bạn cũng có thể chỉ định từng phần riêng lẻ lớp CSS riêng. Hãy sử dụng phương thức này nếu bạn muốn tạo kiểu cho từng phần riêng biệt. Ví dụ: bạn muốn mỗi nhãn có một màu riêng.

Bảng sau đây liệt kê các loại, nội dung mô tả và các lớp CSS mặc định của từng phần trong hộp công cụ danh mục. Nếu bạn gặp khó khăn khi hình dung điều này, hãy mở công cụ dành cho nhà phát triển trong trình duyệt và kiểm tra hộp công cụ.

Loại bộ phận Mô tả Lớp CSS mặc định
nội dung div chứa tất cả danh mục. blocklyToolboxCategoryGroup
vùng chứa div chứa một danh mục duy nhất và các danh mục phụ của danh mục đó. blocklyToolboxCategoryContainer
hàng div chứa danh mục. blocklyToolboxCategory
rowcontentcontainer div chứa nhãn và biểu tượng. blocklyTreeRowContentContainer
biểu tượng span chứa biểu tượng. blocklyToolboxCategoryIcon
nhãn span chứa nhãn. blocklyToolboxCategoryLabel
đã chọn Được thêm vào "hàng" div khi danh mục được chọn. blocklyToolboxSelected
openicon Được thêm vào "biểu tượng" span khi một danh mục có danh mục con được mở. blocklyToolboxCategoryIconOpen
closedicon Được thêm vào biểu tượng "span" khi một danh mục có danh mục phụ bị đóng. blocklyToolboxCategoryIconClosed

Ví dụ: giả sử bạn muốn tất cả nhãn đều có màu trắng nhưng mỗi hàng của danh mục đều có màu nền riêng. Để làm việc này, bạn cần có các lớp CSS tuỳ chỉnh cho từng hàng. Bạn có thể dùng lớp mặc định cho nhãn.

Một hộp công cụ có hai danh mục. Nhãn danh mục đều có màu trắng, nhưng màu nền của chúng khác nhau.

Trước tiên, hãy chỉ định các lớp CSS tuỳ chỉnh trong JSON hoặc XML xác định danh mục của bạn:

JSON

Đặt các lớp CSS tuỳ chỉnh bằng thuộc tính 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

Đặt các lớp CSS tuỳ chỉnh bằng cách sử dụng một thuộc tính có tên là loại phần có css- được thêm vào trước.

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="yourRow">
  ...
</category>

Trong tệp CSS, hãy dùng các lớp tuỳ chỉnh để chỉ định màu hàng và lớp mặc định để chỉ định màu nhãn:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

Giao diện

Chủ đề cho phép bạn chỉ định tất cả màu sắc của không gian làm việc cùng một lúc, bao gồm cả màu sắc của các danh mục.

Để sử dụng, bạn phải liên kết danh mục của mình với một kiểu danh mục cụ thể:

JSON

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

XML

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

Màu sắc

Bạn cũng có thể chỉ định màu trực tiếp, nhưng không nên làm vậy. Màu là một số được chuyển đổi thành chuỗi (0-360) chỉ định sắc độ. Xin lưu ý cách viết theo tiếng Anh của người Anh.

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>

Xin lưu ý rằng chúng tôi cũng hỗ trợ việc sử dụng các tham chiếu màu có thể bản địa hoá.