Kuika’nın Layout özelliği, elementlerin iç boşluk, hizalama ve boyutlandırma gibi görsel düzenlemelerini kolayca yapmanızı sağlar. 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. Responsive Layout sayesinde farklı ekran boyutlarına uyumlu tasarımlar oluşturabilirsiniz.
Custom Style ve Layout Stilleri
Custom Style bölümünde oluşturduğunuz Layout stillerini kaydederek farklı ekranlarda veya elementlerde kullanabilirsiniz.
Load Style özelliği ile daha önce kaydedilmiş bir stili seçebilir, mevcut stilleri düzenleyebilir, çoğaltabilir veya silebilirsiniz.
Layout Özellikleri
Padding (İç Boşluk)
Elementin içeriği ile sınırları arasındaki boşluğu belirler.
Top (Üst), Bottom (Alt), Right (Sağ), Left (Sol) seçeneklerini belirli bir değerle ayarlayabilirsiniz.
Not: Kuika’da Margin özelliği yoktur. Elementler arasındaki boşluk, Padding kullanılarak ayarlanabilir.
Size (Boyut)
Width (Genişlik): Elementin yatay boyutu
Height (Yükseklik): Elementin dikey boyutu
Boyutlandırma için şu birimler kullanılır:
PX: Sabit bir değer (ör. 200px)
%: Orantılı bir değer (ör. %20, tarayıcı genişliğine göre ayarlanır)
100%: Elementin bulunduğu alanı tamamen kaplamasını sağlar.
Max Size (Maksimum Boyut)
Elementin alabileceği en büyük genişlik ve yükseklik değerlerini belirler.
Örnek: Max Width: 480px değeri, tarayıcı genişliğine göre en fazla 480px olarak ayarlanır.
Min Size (Minimum Boyut)
Elementin küçültülebileceği en küçük genişlik ve yükseklik değerlerini belirler.
Min Size, Max Width veya Max Height ile birlikte kullanıldığında düzenin korunmasını sağlar.
Align (Hizalama)
Elementin içeriğini veya bulunduğu container içindeki diğer elementleri hizalar.
Dikey Hizalama: Yukarı, ortalı, aşağı
Yatay Hizalama: Sola, ortalı, sağa
Display (Gösterim Tipi)
Block: Elementi, container içinde tek başına bir satıra yerleştirir.
Inline: Elementleri yan yana düzenler (Ancak bazı elementler bu gösterim tipini desteklemeyebilir).
Elementlerde Layout Ayarları Yapma
Elemente Tıklayın: Düzenlemek istediğiniz elementi seçin.
Styling Panelini Açın: Sağ kenardaki Styling panelini açın.
Padding (İç Boşluk) Ayarları:
Layout alanındaki Padding bölümüne gidin.
Top, Bottom, Right, Left alanlarına değerler girerek iç boşlukları ayarlayın.
Size (Boyut) Ayarları:
Width ve Height değerlerini PX veya % biriminde tanımlayın.
Min Size (Minimum Boyut):
Min Width ve Min Height değerlerini girerek minimum boyutu ayarlayın.
Max Size (Maksimum Boyut):
Max Width ve Max Height değerlerini girerek maksimum boyutu belirleyin.
Align (Hizalama):
Dikey veya Yatay hizalama ayarlarını seçin.
Display (Gösterim Biçimi):
Block veya Inline seçeneklerinden birini seçerek elementin container içindeki konumunu belirleyin.
Önemli Notlar
Layout özellikleri, element türüne göre değişiklik gösterebilir.
Bazı elementler tüm Layout özelliklerini desteklerken, bazıları yalnızca belirli özellikleri destekleyebilir.
Bu adımları izleyerek elementlerinizi doğru şekilde düzenleyebilir ve uygulamanızda tutarlı bir tasarım elde edebilirsiniz.
