Temalar, Blockly'nin görünümünü ve tarzını özelleştirmenin bir yoludur. Themes
sınıfı aracılığıyla blok renklerini, kategori renklerini ve belirli bileşenleri özelleştirebilirsiniz. Ek bileşenleri özelleştirmek istiyorsanız tema adını, yerleştirme div bölümünde bir sınıf olarak sağlarız. Bu, kullanıcıların desteklenmeyen bileşenlerin görünümünü CSS aracılığıyla değiştirmesine olanak tanır. Tema oluştururken ana hedefimiz, geliştiricileri daha erişilebilir
Blockly deneyimleri oluşturma konusunda desteklemektir.
Tema Özellikleri
Tema, birkaç özelliği olan bir nesnedir: temel tema; bloklar, kategoriler, bileşenler ve yazı tipleri için bir stil nesnesi ve başlangıç blokları için şapka kullanılıp kullanılmayacağı.
Blok Tarzı
Blok stili dört alandan oluşur:
colourPrimary
(gerekli) - Bloğun arka plan rengi.colourSecondary
(isteğe bağlı): Blok bir gölge blokuysa arka plan rengi.colourTertiary
(isteğe bağlı) - Bloğun kenarlık veya vurgu rengi.hat
(isteğe bağlı) - Değercap
olarak ayarlanırsa bloka şapka ekler. Şapkalar hakkında daha fazla bilgi edinin.
const listBlocks = {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9',
'hat': 'cap'
}
Bir tema, blok stili nesnesi için blok stili adının eşlemesini içerir:
const blockStyles = {
'list_blocks': {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9'
},
'logic_blocks': {
'colourPrimary': '#01579b',
'colourSecondary':'#64C7FF',
'colourTertiary':'#C5EAFF'
}
}
Kategori Stili
Bir kategori stili yalnızca bir renk özelliği içerir.
- Renk (gerekli) - Araç kutusundaki kategorinin rengi. Genellikle bu renkler, kategorideki blokların çoğunda bulunan
colourPrimary
ile aynı olmalıdır. Bu, kullanıcıların hangi blokların belirli bir kategoriye ait olduğunu anlamalarını kolaylaştırır.
const mathCategory = {
'colour':'290'
}
Bir tema, kategori adının kategori stili nesnesiyle eşlemesini içerir:
const categoryStyles = {
'list_category': {
'colour': '#4a148c'
},
'logic_category': {
'colour': '#01579b',
}
}
Bileşen Stilleri
Tema, aşağıdaki bileşenlerin rengini veya değerini ayarlayabilir:
workspaceBackgroundColour
: Çalışma alanı arka plan rengitoolboxBackgroundColour
: Araç kutusu arka plan rengitoolboxForegroundColour
: Araç kutusu kategorisi metin rengiflyoutBackgroundColour
: Kayan arka plan rengiflyoutForegroundColour
: Açılır etiket metin rengiflyoutOpacity
: Uçuş opaklığıscrollbarColour
: Kaydırma çubuğu rengiscrollbarOpacity
: Kaydırma çubuğu opaklığıinsertionMarkerColour
: Ekleme işaretçisi rengi (Renk adlarını kabul etmez)insertionMarkerOpacity
: Ekleme işaretçisinin opaklığımarkerColour
: Klavyeyle gezinme modunda görüntülenen işaretçinin rengicursorColour
: Klavyeyle gezinme modunda görüntülenen imlecin rengi
Diğer bileşenlerin çoğu, CSS'nizdeki tema adını kullanarak değiştirilebilir. Bununla birlikte, değiştirmek istediğiniz ancak halihazırda bu listede yer almayan ve CSS kullanılarak değiştirilemeyen bir bileşen varsa lütfen daha fazla bilgi vererek sorun bildiriminde bulunun.
const componentStyle = {
'workspaceBackgroundColour': '#1e1e1e',
'toolboxBackgroundColour': '#333'
}
Yazı Tipi Stilleri
Yazı tipi stili, yazı tipinin ailesini, ağırlığını ve boyutunu barındıran bir nesnedir.
const fontStyle = {
'family': 'Georgia, serif',
'weight': 'bold',
'size': 12
}
Başlangıç Şapkaları
startHats: true
öğesini doğrudan bir tema nesnesinde ayarlarsanız önceden veya çıkış bağlantısı olmayan tüm bloklara şapka eklenir. Tam olarak hangi blokların şapka alacağı konusunda daha fazla kontrol sahibi olmak istiyorsanız bunun yerine block style özelliğini kullanabilirsiniz.
Özel Temalar
Blockly uygulamanıza tema eklemek için aşağıdakileri yapmanız gerekir:
- Tema oluşturma
- Stil adları ekleyin
- Temanızı bir çalışma alanında ayarlama
Tema Oluşturun
Bir tema, oluşturucu kullanılarak veya defineTheme
kullanılarak oluşturulabilir. defineTheme
kullanmak, mevcut bir temayı genişletmeyi ve tüm değerleri tek bir nesneyle ayarlamayı kolaylaştırır. Temanın adı vardır ve yukarıda açıklandığı gibi blok stilleri, kategori stilleri
ve diğer özelliklere sahip bir nesnedir.
Bir temanın temel teması da olabilir. Bu tema, özel temada belirtilmeyen tüm değerler için varsayılan değerler sağlar.
const theme = Blockly.Theme.defineTheme('themeName', {
'base': Blockly.Themes.Classic,
'blockStyles': {
'logic_blocks': {
'colourPrimary': '#4a148c'
},
'math_blocks': {...}
},
'categoryStyles': {...},
'componentStyles': {...},
'fontStyle': {...},
'startHats': true
});
defineTheme
kullanımına ilişkin bir örnek burada bulabilirsiniz.
Stil Adları Ekle
Artık bir tema oluşturduğumuza göre blok ve kategori tanımlarına stillerin adını eklememiz gerekir.
Kategoriler
Araç kutunuzu tanımlama şekliniz, stil adını nasıl eklemeniz gerektiğini belirler. Daha fazla bilgi için araç kutusu sayfasını inceleyin.
Bloklar
Bloğunuzu tanımlama şekliniz, stil adını nasıl eklemeniz gerektiğini belirler. Özel bloklar sayfamızda blok tanımları hakkında daha fazla bilgi bulabilirsiniz. Temanın blockStyles
özelliğinde tanımladığınız blok stillerinden birini blokunuza atayacaksınız.
JSON
"style":"logic_blocks"
JavaScript
this.setStyle('logic_blocks');
Temanızı belirleyin
Ayrıca, Blockly'ye hangi temanın kullanılacağını bildirmeniz de gerekir. Aynı blok stilini ve kategori adlarını kullanan birkaç tema tanımlayarak kullanıcının kendisi için en uygun temayı seçmesine ve blok tanımlarını değiştirmek zorunda kalmadan dinamik olarak değiştirmesine izin verebilirsiniz.
İlk tema
Bir başlangıç teması ayarlamanın en iyi yolu, ekleme çağrınıza options.theme
öğesini eklemektir. Temayı JSON veya JavaScript'te sağlayabilirsiniz.
JSON
{
theme: {
"blockStyles" : {
"list_blocks": {
"colourPrimary": "#4a148c",
"colourSecondary":"#AD7BE9",
"colourTertiary":"#CDB6E9"
}
},
"categoryStyles" : {
"list_category": {
"colour": "#4a148c"
}
},
"componentStyles" : {
"workspaceBackgroundColour": "#1e1e1e"
}
}
}
JavaScript
{
theme: Blockly.Theme.defineTheme('themeName', {
'blockStyles': blockStyles,
'categoryStyles': categoryStyles,
'componentStyles': componentStyles
})
}
Seçenekler hakkında daha fazla bilgiyi yapılandırma sayfamızda bulabilirsiniz. Tema sağlanmazsa varsayılan olarak Klasik Tema kullanılır.
Dinamik temalar
Temanızı dinamik olarak değiştirmek istiyorsanız (örneğin, kullanıcıların açılır menüden tema seçmesine izin vermek durumunda) yourWorkspace.setTheme(theme)
yöntemini çağırabilirsiniz.
Blok Stilleri Komut Dosyası Oluşturma
Blockly, tonların veya onaltılık değerlerin haritasını alacak ve bunlar için ikincil ve üçüncül renkleri hesaplayacak bir komut dosyası sağlar. Komut dosyasını komut dosyaları/temalar klasöründe bulabilirsiniz.
Yerleşik temalar
Blockly, erişilebilirlik için bir dizi tema, özellikle de bazı renk körlüğü türleri sunar:
Ek bilgiler: