Kategori görünümü

Blockly, varsayılan bir kategori kullanıcı arayüzü ve bununla birlikte bazı temel stil seçenekleri sunar. Kullanıcı arayüzünde daha gelişmiş stil oluşturma/yapılandırma hakkında bilgi edinmek istiyorsanız Customizing a Blockly toolbox codelab ve 2021 Toolbox APIs talk başlıklı makaleleri inceleyin.

Altı kategorili bir kategori araç kutusu. Değişkenler kategorisi açıktır ve değişken alıcı ile ayarlayıcı bloklarını içerir. Blokların rengi, Değişkenler kategorisinin adının solundaki dikey çubuğun rengiyle eşleşir.

Kategori CSS'si

Kategori araç kutularını biçimlendirmek için CSS kullanabilirsiniz.

Kategori araç kutusu, her biri araç kutusunun farklı bir bölümünü modelleyen birden fazla HTML öğesinden oluşur. Örneğin, her kategorinin kendi div değeri vardır ve simgesi ile etiketi için ayrı span değerleri bulunur. (Tam liste için aşağıdaki tabloya bakın.)

Blockly, aynı türdeki tüm parçalara varsayılan bir CSS sınıfı atar. Örneğin, tüm span etiketlerine blocklyToolboxCategoryLabel değerini atar. Aynı türdeki tüm bölümleri aynı şekilde biçimlendirmek için bu sınıfları kullanın. Örneğin, tüm etiketlere aynı rengi atayabilirsiniz. Blockly, bu sınıfları kategori araç kutuları için varsayılan CSS'sinde kullanır.

İsteğe bağlı olarak, özel CSS sınıflarını tek tek parçalara atayabilirsiniz. Örneğin, her etikete farklı CSS sınıfları atayabilirsiniz span. Bu sınıfları, aynı türün farklı bölümlerini farklı şekillerde biçimlendirmek için (ör. her etikete farklı bir renk atamak) kullanın.

Varsayılan CSS sınıfları

Aşağıdaki tabloda, kategori araç kutusunun her bir bölümünün türleri, açıklamaları ve varsayılan CSS sınıfları listelenmektedir. Bunu görselleştirmekte zorlanıyorsanız tarayıcınızda geliştirici araçlarını açıp araç kutusunu inceleyin.

Parça türü Açıklama Varsayılan CSS sınıfı
içerik Tüm kategorileri içeren div. blocklyToolboxCategoryGroup
kapsayıcı Tek bir kategori ve alt kategorilerini içeren div. blocklyToolboxCategoryContainer
satır Kategoriyi içeren div. blocklyToolboxCategory
rowcontentcontainer Etiketi ve simgeyi içeren div. blocklyTreeRowContentContainer
kurallara göz atabilirsiniz Simgeyi içeren span. blocklyToolboxCategoryIcon
etiket Etiketi içeren span. blocklyToolboxCategoryLabel

CSS, araç kutusunun bazı bölümlerinin durumunu etiketlemek için de kullanılır.

Eyalet Açıklama Varsayılan CSS sınıfı
seçili Kategori seçildiğinde "satır" div öğesine eklenir. blocklyToolboxSelected
openicon Alt kategorileri olan bir kategori açıldığında "simge"ye span eklenir. blocklyToolboxCategoryIconOpen
closedicon Alt kategorileri olan bir kategori kapatıldığında "simge"ye span eklenir. blocklyToolboxCategoryIconClosed

Özel CSS sınıfları

Özel CSS sınıfları atamak için JSON araç kutusu tanımlarında cssConfig özelliğini veya XML araç kutusu tanımlarında css- özelliklerini kullanın ve sınıfları atamak istediğiniz bölümü tanımlamak için partType'ı kullanın.

Örneğin, tüm etiketlerin beyaz olmasını ancak her kategorinin kendi arka plan rengine sahip olmasını istediğinizi varsayalım. Etiketler için varsayılan sınıfı kullanabilirsiniz ancak her kategori satırı için özel sınıflar eklemeniz gerekir.

İki kategorili bir araç kutusu. Kategori etiketlerinin ikisi de beyaz ancak arka plan renkleri farklı.

Aşağıdaki kategori tanımları, her kategorinin satırına özel CSS sınıfları atar. Satırlar için varsayılan sınıfın (blocklyToolboxCategory) her tanıma dahil edildiğini unutmayın. Bunun nedeni, Blockly'nin sınıfları atarken satırın class özelliğinin üzerine yazmasıdır. Varsayılan sınıfı eklemezseniz bu sınıf için varsayılan CSS'yi almazsınız.

JSON

cssConfig özelliğini kullanarak özel CSS sınıfları ayarlayın.

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

Adı, önüne css- eklenmiş parça türü olan bir özelliği kullanarak özel CSS sınıfları ayarlayın.

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

CSS dosyanızda, satır renklerini atamak için özel sınıfları, etiket rengini atamak için ise varsayılan sınıfı kullanın:

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

Temalar

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

Bu kategorileri kullanmak için kategorinizi belirli bir kategori stiliyle ilişkilendirmeniz gerekir:

JSON

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

XML

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

Renkler

Rengi doğrudan da belirtebilirsiniz ancak bu önerilmez. Renk, tonu belirten, dizeleştirilmiş bir sayıdır (0-360). İngiliz İngilizcesi yazımını kullanın.

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>

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