Tampilan kategori

Blockly menyediakan UI kategori default, dan dengan UI tersebut, beberapa opsi dasar untuk gaya. Jika Anda ingin mengetahui informasi tentang cara melakukan penataan/konfigurasi UI yang lebih canggih, lihat codelab Menyesuaikan kotak alat Blockly dan pembahasan API Kotak Alat 2021.

Kotak alat kategori dengan enam kategori. Kategori Variabel terbuka dan berisi blok pengambil dan penyetel variabel. Warna blok cocok dengan warna batang vertikal di sebelah kiri nama kategori Variabel.

CSS Kategori

Anda dapat menggunakan CSS untuk mengatur gaya kotak alat kategori.

Toolbox kategori terdiri dari beberapa elemen HTML, yang masing-masing memodelkan bagian toolbox yang berbeda. Misalnya, setiap kategori memiliki div dan span terpisah untuk ikon dan labelnya. (Untuk daftar lengkap, lihat tabel di bawah.)

Blockly menetapkan class CSS default ke semua bagian dengan jenis yang sama. Misalnya, tindakan ini menetapkan blocklyToolboxCategoryLabel ke semua label span. Gunakan class ini untuk menata gaya semua bagian dari jenis yang sama dengan cara yang sama, seperti untuk menetapkan warna yang sama ke semua label. Blockly menggunakan class ini dalam CSS default untuk toolbox kategori.

Anda dapat secara opsional menetapkan class CSS kustom ke setiap bagian. Misalnya, Anda dapat menetapkan class CSS yang berbeda untuk setiap label span. Gunakan class ini untuk menata gaya berbagai bagian dari jenis yang sama dengan cara yang berbeda, seperti menetapkan warna yang berbeda untuk setiap label.

Class CSS default

Tabel berikut mencantumkan jenis, deskripsi, dan class CSS default dari setiap bagian toolbox kategori. Jika Anda kesulitan memvisualisasikannya, buka alat developer di browser Anda dan periksa toolbox.

Jenis komponen Deskripsi Class CSS default
Isi div yang berisi semua kategori. blocklyToolboxCategoryGroup
container div yang berisi satu kategori dan subkategorinya. blocklyToolboxCategoryContainer
baris div yang berisi kategori. blocklyToolboxCategory
rowcontentcontainer div yang berisi label dan ikon. blocklyTreeRowContentContainer
ikon span yang berisi ikon. blocklyToolboxCategoryIcon
label span yang berisi label. blocklyToolboxCategoryLabel

CSS juga digunakan untuk memberi label status beberapa bagian toolbox.

Negara Bagian Deskripsi Class CSS default
dipilih Ditambahkan ke "baris" div saat kategori dipilih. blocklyToolboxSelected
openicon Ditambahkan ke span "ikon" saat kategori dengan subkategori terbuka. blocklyToolboxCategoryIconOpen
closedicon Ditambahkan ke span "ikon" saat kategori dengan subkategori ditutup. blocklyToolboxCategoryIconClosed

Class CSS kustom

Untuk menetapkan class CSS kustom, gunakan properti cssConfig dalam definisi toolbox JSON atau atribut css- dalam definisi toolbox XML dan gunakan jenis bagian untuk mengidentifikasi bagian yang ingin Anda tetapkan class-nya.

Misalnya, Anda ingin semua label berwarna putih, tetapi setiap kategori memiliki warna latar belakangnya sendiri. Anda dapat menggunakan class default untuk label, tetapi perlu menambahkan class kustom untuk baris setiap kategori.

Toolbox dengan dua kategori. Label kategori berwarna putih, tetapi warna latar belakangnya berbeda.

Definisi kategori berikut menetapkan class CSS kustom ke setiap baris kategori. Perhatikan bahwa class default untuk baris (blocklyToolboxCategory) disertakan dalam setiap definisi. Hal ini karena Blockly mengganti atribut class baris saat menetapkan class. Jika Anda tidak menyertakan class default, Anda tidak akan mendapatkan CSS default untuk class tersebut.

JSON

Tetapkan class CSS kustom menggunakan properti 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

Tetapkan class CSS kustom menggunakan atribut yang namanya adalah jenis bagian dengan css- ditambahkan di depannya.

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

Dalam file CSS, gunakan class kustom untuk menetapkan warna baris dan class default untuk menetapkan warna label:

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

Tema

Tema memungkinkan Anda menentukan semua warna ruang kerja sekaligus, termasuk warna kategori.

Untuk menggunakannya, Anda harus mengaitkan kategori dengan gaya kategori tertentu:

JSON

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

XML

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

Warna

Anda juga dapat menentukan warna secara langsung, tetapi tindakan ini tidak disarankan. Warna adalah angka yang diubah menjadi string (0-360) yang menentukan hue. Perhatikan ejaan Inggris.

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>

Perhatikan bahwa kami juga mendukung penggunaan referensi warna yang dapat dilokalkan.