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 video tentang 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. Entri untuk setiap kategori dibagi menjadi beberapa bagian, seperti ikon, label, dan baris yang berisi ikon dan label. Anda dapat menata gaya setiap bagian secara terpisah.

Secara default, semua bagian dengan jenis yang sama (misalnya, semua label) diberi class CSS yang sama. Gunakan class ini jika Anda ingin menata semua bagian dari jenis yang sama dengan cara yang sama. Misalnya, Anda ingin semua label memiliki warna yang sama.

Anda juga dapat menetapkan class CSS-nya sendiri untuk setiap bagian. Gunakan metode ini jika Anda ingin menata gaya setiap bagian secara berbeda. Misalnya, Anda ingin setiap label memiliki warnanya sendiri.

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

Sebagai contoh, misalkan Anda ingin semua label berwarna putih, tetapi setiap baris kategori memiliki warna latar belakangnya sendiri. Untuk melakukannya, Anda memerlukan class CSS kustom untuk setiap baris. Anda dapat menggunakan class default untuk label.

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

Pertama, tetapkan class CSS kustom dalam JSON atau XML yang menentukan kategori Anda:

JSON

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

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

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