Kategori görünümü

Blockly, varsayılan bir kategori kullanıcı arayüzü ve stil oluşturmayla ilgili bazı temel seçenekler sunar. Kullanıcı arayüzünde daha gelişmiş stillendirme/yapılandırma yapma hakkında bilgi edinmek istiyorsanız Blockly araç kutusu kod laboratuvarını özelleştirme ve 2021 Araç Kutusu API'leri konuşmasını inceleyin.

Temalar

Temalar, kategorilerinizin renkleri dahil olmak üzere çalışma alanınızdaki tüm renkleri tek seferde belirtmenize olanak tanır.

Bunları kullanmak için kategorinizi belirli bir kategori stiliyle ilişkilendirmeniz gerekir:

JSONXML

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

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

Renkler

Rengi doğrudan da belirtebilirsiniz ancak bu önerilmez. Renk, tonu belirten dize biçiminde bir sayıdır (0-360). İngiliz yazımına dikkat edin.

JSONXML

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

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

Yerelleştirilebilir renk referanslarının da kullanılabileceğini unutmayın.

Kategori CSS'si

Daha güçlü bir özelleştirme istiyorsanız Blockly, varsayılan kullanıcı arayüzünün farklı öğeleri için CSS sınıfları da belirtmenize olanak tanır. Ardından, CSS'yi kullanarak bu öğeleri biçimlendirebilirsiniz.

Aşağıdaki öğe türlerine CSS sınıfları uygulanabilir:

container: Kategorinin üst div'inin sınıfı. Varsayılan blocklyToolboxCategory.
row: Kategori etiketini ve simgesini içeren div sınıfı. Varsayılan blocklyTreeRow.
icon: Kategori simgesinin sınıfı. Varsayılan blocklyTreeIcon.
label: Kategori etiketinin sınıfı. Varsayılan blocklyTreeLabel.
selected: Seçildiğinde kategoriye eklenen sınıf. Varsayılan blocklyTreeSelected.
openicon: Kategoride iç içe yerleştirilmiş kategoriler varsa ve kategori açıksa bir simgeye eklenen sınıf. Varsayılan blocklyTreeIconOpen.
closedicon: Kategoride iç içe yerleştirilmiş kategoriler varsa ve kategori kapalıysa bir simgeye eklenen sınıf. Varsayılan blocklyTreeIconClosed.

Sınıfları bu biçimlerden birini kullanarak belirtmek için:

JSONXML

cssConfig mülkünü kullanarak belirli bir öğe türünün CSS sınıfını ayarlayın.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

Belirli bir öğe türünün CSS sınıfını, "css-" ön ekini ekleyerek ayarlayın.

<category name="..." css-container="yourClassName"></category>