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, cùng với 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 cô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.

Hộp công cụ danh mục bao gồm nhiều phần tử HTML, mỗi phần tử mô hình hoá một phần khác nhau của hộp công cụ. Ví dụ: mỗi danh mục có div riêng và span riêng cho biểu tượng và nhãn của danh mục đó. (Để xem danh sách đầy đủ, hãy xem bảng bên dưới.)

Blockly chỉ định một lớp CSS mặc định cho tất cả các phần thuộc cùng một loại. Ví dụ: nó chỉ định blocklyToolboxCategoryLabel cho tất cả span nhãn. Sử dụng các lớp này để tạo kiểu cho tất cả các phần thuộc cùng một loại theo cùng một cách, chẳng hạn như để chỉ định cùng một màu cho tất cả các nhãn. Blockly sử dụng các lớp này trong CSS mặc định cho hộp công cụ danh mục.

Bạn có thể tuỳ ý chỉ định các lớp CSS tuỳ chỉnh cho từng phần. Ví dụ: bạn có thể chỉ định các lớp CSS khác nhau cho từng nhãn span. Sử dụng các lớp này để tạo kiểu cho các phần khác nhau của cùng một loại theo nhiều cách, chẳng hạn như chỉ định một màu khác cho mỗi nhãn.

Các lớp CSS mặc định

Bảng sau đây liệt kê các loại, nội dung mô tả và 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 con 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

CSS cũng được dùng để gắn nhãn trạng thái của một số phần trong hộp công cụ.

Tiểu bang Mô tả Lớp CSS mặc định
đã 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 con bị đóng. blocklyToolboxCategoryIconClosed

Lớp CSS tuỳ chỉnh

Để chỉ định các lớp CSS tuỳ chỉnh, hãy dùng thuộc tính cssConfig trong các định nghĩa hộp công cụ JSON hoặc thuộc tính css- trong các định nghĩa hộp công cụ XML và dùng loại phần để xác định phần mà bạn muốn chỉ định các lớp.

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

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

Các định nghĩa danh mục sau đây sẽ chỉ định các lớp CSS tuỳ chỉnh cho hàng của từng danh mục. Xin lưu ý rằng lớp mặc định cho các hàng (blocklyToolboxCategory) được đưa vào mỗi định nghĩa. Điều này là do Blockly ghi đè thuộc tính class của hàng khi chỉ định các lớp. Nếu không thêm lớp mặc định, bạn sẽ không nhận được CSS mặc định cho lớp đó.

JSON

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

Đặ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 với css- được thêm vào trước.

<category name="My category" css-row="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory 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 như 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á.