Kuika’nın Styling panelini kullanarak, uygulamanızdaki elementlerin ve ekranların görsel stillerini kolayca değiştirebilirsiniz. Styling paneli, uygulamanızın tasarımını özelleştirmenizi sağlayan güçlü özellikler sunar.
Styling Panelinin Özellikleri
Workspace (Çalışma Alanı) Rengini Değiştirme
Workspace alanının rengini değiştirerek uygulamanızın genel görünümünü özelleştirebilirsiniz.
Elementlerin Kenarlıklarını Düzenleme
Her elementin kenarlık özelliklerini değiştirebilirsiniz.
Kenarlık kalınlığı, rengi ve stili ayarlanabilir.
Border-Radius değeri ile köşe biçimlerini yuvarlatarak modern bir görünüm elde edebilirsiniz.
Metin (Text) ve Font Seçimleri
Metin stillerini kolayca düzenleyebilirsiniz.
Yazı tipi, boyutu, rengi ve stili (italik, kalın) belirlenebilir.
Metin hizalamasını (sol, sağ, ortada) ayarlayarak tutarlı bir yazı düzeni oluşturabilirsiniz.
Düzen (Layout) ve Boşluklandırma
Elementler arasındaki boşlukları ve hizalamayı düzenleyebilirsiniz.
Padding (iç boşluk) ve Margin (dış boşluk) ayarları ile elementler arasındaki mesafeyi belirleyebilirsiniz.
Dolgu (Fill) Renkleri
Elementlere özel dolgu renkleri ekleyebilir veya mevcut renkleri değiştirebilirsiniz.
Fill özelliği, arka plan rengi belirlemek veya butonların iç rengini düzenlemek için kullanılır.
Gölgeleme (Shadow)
Elementlere iç (inner shadow) ve dış (outer shadow) gölge ekleyerek derinlik kazandırabilirsiniz.
Gölgelendirme, öğelerin daha dikkat çekici ve üç boyutlu görünmesini sağlar.
Kendi Stillerinizi Oluşturma
Styling paneli, sadece mevcut stilleri kullanmakla kalmaz, aynı zamanda kendi stil şablonlarınızı oluşturmanıza da olanak tanır.
Özel stil tasarımları ile uygulamanızda tutarlı bir görsel kimlik oluşturabilirsiniz.
Element State'lerine Göre Stil Tanımlama
Styling panelinde her element için farklı etkileşim durumlarına (state) özel stiller tanımlayabilirsiniz. State seçici, yalnızca web uygulamalarında kullanılabilir; mobil uygulamalarda bu özellik devre dışıdır.
Desteklenen State'ler:
None: Elementin varsayılan görünümünü temsil eder. Mevcut stil yapısıyla birebir örtüşür.
Hover: Kullanıcı elementin üzerine geldiğinde uygulanacak stili tanımlar.
Focused: Element odaklandığında (örneğin bir Input'a tıklandığında) geçerli olan stildir.
Pressed: Kullanıcı elemente tıkladığı an aktif olan stildir.
Disabled: Element devre dışı olduğunda görüntülenecek stili tanımlar.
Stil öncelik sırası şu şekilde işler: bir element üzerinde doğrudan yapılan state stil değişiklikleri (turuncu indikatör ile gösterilir) her zaman önceliklidir. Bu yoksa, birden fazla custom style tag varsa en son eklenen Style Tag'ının değişiklikleri (mavi indikatör) uygulanır.
State bazlı bir değişiklik yapıldığında component üzerinde turuncu bir indikatör görünür ve bu değişiklik sıfırlanabilir.
Style tag düzenlenirken None State'inin arka planı mavi, yapılan değişiklikler ise mavi indikatör ile işaretlenir.
Kapsamlı Stiller
Layout: Elementlerin yerleşimini, hizalanmasını ve boşluklarını düzenler.
Text: Yazı tiplerini, boyutlarını, renklerini ve stillerini ayarlayabilirsiniz.
Fill: Arka plan renkleri, gradientler ve desenler oluşturabilirsiniz.
Colour: Renk paletlerini kullanarak elementlerin renklerini değiştirebilirsiniz.
Border: Kenarlık renklerini, kalınlıklarını ve köşe yuvarlatmalarını düzenleyebilirsiniz.
Shadow: İç ve dış gölgelerle elementlerinizi daha belirgin hale getirebilirsiniz.
Mobil ve Web Uygulamaları için Kişiselleştirme
Styling paneli, mobil ve web uygulamalarınız için özel tasarımlar oluşturmanıza olanak tanır.
Farklı ekran boyutları ve çözünürlükler için stil ayarları yaparak, uygulamanızın her cihazda doğru şekilde görüntülenmesini sağlarsınız.
Responsive tasarım özellikleri sayesinde, her platformda uyumlu ve kullanıcı dostu bir deneyim sunabilirsiniz.
Sonuç olarak, Styling paneli ile uygulamanızın görsel unsurlarını özelleştirerek estetik ve işlevsel arayüzler oluşturabilirsiniz. Hazır stilleri kullanabilir veya kendi özgün tasarımlarınızı oluşturabilirsiniz.
