Kategori görünümü

Blockly, varsayılan bir kategoriler kullanıcı arayüzü ve bununla birlikte stil oluşturmayla ilgili bazı temel seçenekler 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. Her kategori girişi; simgesi, etiketi ve simge ile etiketi içeren satır gibi birden fazla bölüme ayrılır. Her bölümü ayrı ayrı stilize edebilirsiniz.

Varsayılan olarak, aynı türdeki tüm parçalara (ör. tüm etiketler) aynı CSS sınıfı atanır. Aynı türdeki tüm parçaları aynı şekilde stilize etmek istiyorsanız bu sınıfı kullanın. Örneğin, tüm etiketlerin aynı renkte olmasını istiyorsunuz.

Ayrıca her bir parçaya kendi CSS sınıfını da atayabilirsiniz. Tek tek parçaları farklı şekilde stilize etmek istiyorsanız bu yöntemi kullanın. Örneğin, her etiketin kendi rengine sahip olmasını istiyorsunuz.

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çın ve 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
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

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

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

Öncelikle, kategorilerinizi tanımlayan JSON veya XML'de özel CSS sınıfları atayın:

JSON

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

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

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

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