Layout (Düzen)

Kuika'nın Layout özelliği, elementlerin çevresel boşluk, hizalama ve boyutlandırma gibi görsel düzenlemelerinin kolayca yapılmasını sağlar. Özellikle Row veya Column gibi düzenleyici yapılar kullanıldığında, verilen hizalama komutları yalnızca bu yapıların kendisini değil, içerdiği tüm elementlerin düzenini de etkiler. Bu sayede, karmaşık tasarımlar oluştururken tutarlı bir görünüm elde edilebilir. Kuika'nın Responsive Layout yaklaşımı, farklı ekran boyutlarında uyumlu tasarımlar oluşturmanıza olanak tanırken, Padding ve Size gibi ayarlar sayesinde her element için özelleştirilebilir bir yapı sunar.

Custom Style bölümünde oluşturulan Layout stillerini kaydederek farklı ekranlarda veya aynı ekrandaki diğer elementlerde kullanabilirsiniz. Bu işlem için Load Style özelliği ile daha önce kaydedilmiş bir stili seçebilirsiniz. Kaydettiğiniz Layout stillerini istediğiniz zaman düzenleyebilir, çoğaltabilir veya silebilirsiniz.

Padding (İç Boşluk)

Elementlere iç boşluk eklemek için Padding özelliğini kullanabilirsiniz. Bu alan, elementin içerik ile sınırları arasındaki boşluğu ifade eder. Top (üst), Bottom (alt), Right (sağ) ve Left (sol) seçeneklerini belirli bir değerle ayarlayarak elementin istediğiniz yönlerinde boşluk bırakabilirsiniz.

UI (Kullanıcı Arayüzü) tasarımında Margin bir elementin (örneğin, bir buton, label) çevresindeki boşluğu veya uzaklığı belirlemeyi sağlamaktadır. Kuika’da Margin yoktur. Fakat Margin kullanmadan elementler veya nesneler arasındaki boşluk yapısını Padding yapısı ile kolaylıkla yapabilirsiniz.

Size (Boyut)

Çalışma alanına eklediğiniz elementlerin boyutlarını düzenlerken aşağıdaki özelliklerden yararlanabilirsiniz:

1. Width (Genişlik): Elementin yatay boyutunu belirtir.
2. Height (Yükseklik): Elementin dikey boyutunu belirtir.

Boyutlandırma yaparken px (piksel) veya % (yüzde) birimlerini kullanabilirsiniz:

• PX: Sabit bir değer belirtir. Örneğin, 200px genişlik, tüm cihazlarda aynı boyutta görünür.
• %: Orantılı bir değer belirtir. Örneğin, %20 genişlik, tarayıcı ekran genişliğine göre ayarlanır.
• 100% Değeri: Browser genişliğine veya yüksekliğine göre elementin tüm alanı kaplamasını sağlar.

Max Size (Maksimum Boyut)

Max Size, elementin alabileceği en büyük genişlik ve yükseklik değerlerini belirler.

• Örneğin, bir Image elementine Max Width: 480px değeri girildiğinde, browser genişliğine göre maksimum 480px olur, daha dar ekranlarda bu genişlik küçülebilir.

Min Size (Minimum Boyut)

Min Size, bir elementin küçültülebileceği en küçük genişlik veya yükseklik değerini ifade eder.

• Min Size, elementlerin görünüm düzenini korumak için kullanılır ve genellikle Max Width veya Max Height ile birlikte tanımlanır.

Align (Hizalama)

Elementlerin kendi içeriklerini veya bulundukları container içindeki diğer elementleri hizalamak için kullanılır.

• Dikey Hizalama
  • Yukarı hizalı
  • Ortalı
  • Aşağı hizalı
• Yatay Hizalama:
  • Sola hizalı
  • Ortalı
  • Sağa hizalı

Display (Gösterim Tipi)

Elementlerin yan yana mı yoksa alt alta mı sıralanacağını belirlemek için Display özelliğini kullanabilirsiniz.

• Block: Elementi, container içinde tek başına bir satıra yerleştirir.
• Inline: Alt alta duran elementleri yan yana düzenler. Ancak, bazı elementler bu gösterim tipini desteklemeyebilir.

Bu düzenleme araçları ile kullanıcı arayüzü (UI) tasarımınızı etkili ve düzenli bir şekilde şekillendirebilirsiniz.