UI Design
/
Arayüz stilleri ile çalışın

Layout (Düzen)

Layout (Düzen)

Elementin çevresel boşluk ve boyutlandırma gibi özelliklerini Layout (düzen) aracılığıyla ayarlayabilirsiniz. Row veya Column'lar için verilen hizalama komutlarında, bunların içindeki elementler de etkilenir.

Custom Style bölümünde oluşturduğunuz Layout stilini kaydederek, farklı ekranlarda veya aynı ekranda yer alan farklı elementlerde Load Style aracılığıyla kaydettiğiniz stili kullanabilirsiniz. Oluşturduğunuz Layout stillerini istediğiniz zaman düzenleyebilir, çoğaltabilir ve silebilirsiniz.

Padding (İç Boşluk)

Elementinize iç boşluklar ekleyebilirsiniz. Bu alanda bulunan top (üst), bottom (alt), right (sağ) ve left (sol) seçenekleri sayesinde kullandığınız elemente ihtiyacınız olan yönde belirlediğiniz değerleri girerek tasarımınızı güçlendirebilirsiniz.

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)

Workspace'e (Çalışma alanına) eklediğiniz elementlerin boyutlandırmalarını düzenlerken witdh (genişlik) ve height (yükseklik) alanlarını kullanabilirsiniz.

Kullanacağınız değerleri piksel (px) ve % seçeneklerine göre ayarlayabilirsiniz. PX birimi ile girmiş olduğunuz boyutlarda tam olarak uygulanır. Örneğin 200px genişlik ölçüsü tüm cihazlarda aynı görünecektir. Ancak 20% değeri ekran genişliğini (tarayıcı) temel alarak kendini boyutlandırır. Browser genişliğine veya yüksekliğine göre tam olarak görünmesini istediğiniz elementler için 100% değerini kullanabilirsiniz.

Max Size (Maksimum boyut)

Workspace'e (Çalışma alanına) elementin alabileceği en yüksek genişlik/yükseklik değerini girebileceğiniz alanlardır. Bir Image elementine max 480 genişlik değeri girdiğinizde (padding değerleri de göz önünde bulundurularak) cihaz veya browser genişliğine göre en fazla 480px genişliğinde olacak daha düşük genişliklerde genişlik daralacaktır.

Min Size (Minimum boyut)

Min size (Minimum Boyut), bir elementin alabileceği en küçük genişlik veya yükseklik değerini belirten bir özelliktir. Bu özellik, elementin küçültülebileceği en küçük boyutu ifade eder. Max width veya max height gibi, min size da genellikle elementin boyutunu kontrol etmek ve belirli bir düzeni korumak için kullanılır.

Align (Hizalama)

Elementin kendi içeriği (button elementinin label'ı) veya container elementlerinde çocuk element olarak altında bulunan elementlerin hizalamasını ayarlayabilirsiniz. Dikeyde yukarı, aşağı veya ortalı olabileceği gibi yatayda ortalı, sağa veya sola hizalı olarak istediğiniz gibi ayarlayabilirsiniz.

Display (Gösterim tipi)

Aynı column içine eklediğiniz elementler (ön tanımlı bir ayarlama yoksa) yan yana gelecek şekilde eklenir. Bir elementin bulunduğu container içinde satırda tek başına kalmasını istiyorsanız block seçeneğini kullanabilirsiniz.

Inline'da ise alt alta duran elementleri yan yana gelecek şekilde ayarlamanız mümkündür. Bazı elementleri yan yana ekleyemezsiniz.

İlişkili diğer içerikler

Sözlük

No items found.

Alt Başlıklar