1. Kuika platformuna giriş yapın.
2. Apps ekranından çalışacağınız projeyi açın.
3. UI Design modülüne gidin.

4. Sol kenardaki Elements panelinden Text Input kategorisini seçin.
5. Dynamic Input elementini çalışma alanına sürükleyip bırakın.

• Boş bir alana sürüklerseniz, Dynamic Input elementi bir Row elementi ile birlikte eklenir.‍
• Column içerisine sürüklerseniz yalnızca Dynamic Input elementi eklenir.

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Value: Elementin varsayılan veya bağlı olduğu değeri tanımlar. Bu değer, veri kaynağından ya da kullanıcıdan gelen veriyi temsil eder.
• Placeholder: Kullanıcı herhangi bir seçim yapmadığında veya değer girmediğinde görünen bilgilendirme metnidir.
• Allow Clear: Aktif hale getirildiğinde, kullanıcı seçili değeri temizlemek için bir silme simgesi kullanabilir.
• Formatter: Girilen değerin veya seçilen öğenin nasıl gösterileceğini belirlemek için kullanılan biçimlendirme fonksiyonudur‍
• Data Type: Giriş verisinin veri türünü tanımlar. Örneğin text, number, boolean gibi değerler seçilebilir.
  
  •  DataType için Olası Değerler: 
    
    • String: Metin ifadeleri (örneğin: isim, açıklama, adres).
    • Double: Ondalıklı sayılar (örneğin: 3.14, 99.99).
    • Decimal: Finansal hesaplamalar için hassas ondalıklı sayılar.
    • Int16: Küçük tam sayılar (−32.768 ile 32.767 arası).
    • Int32: Orta boyutlu tam sayılar (−2.147.483.648 ile 2.147.483.647 arası).
    • Int64: Büyük tam sayılar (çok geniş sayı aralığı).
    • DateTimeOffset: Tarih ve saat bilgisi (zaman dilimi desteğiyle).
    • Boolean: Doğru / yanlış (true / false) değerleri.
    • Email: E-posta adresleri (örneğin: kullanici@ornek.com).
    • Password: Gizli parola alanları (gösterimi maskelenir).
    • Barcode: Barkod verileri (genellikle ürün tanımlamaları için).
    • Color: Renk bilgisi (örneğin: #FF5733 veya "Red").
    • Url: Web adresleri (örneğin: https://ornek.com).
    • Guid: Benzersiz kimlik numarası (örneğin: 3f2504e0-4f89-11d3-9a0c-0305e82c3301).

Authorization (Yetkilendirme)

Element düzeyindeki erişim kontrolünü yönetmek için, Properties panelindeki Authorization bölümünü kullanabilirsiniz.

Erişim Tipleri

Anonymous

Elementin tüm kullanıcılar tarafından, giriş yapmadan görüntülenmesine izin verir.

Restricted

Erişimin yalnızca doğrulanmış kullanıcılara veya belirli rollere göre sınırlandırılmasını sağlar.

• Everyone: Aktif edildiğinde, giriş yapmış tüm kullanıcılar elemente erişebilir.
• Roles: Elemente erişmesine izin verilen roller buradan seçilir. Rol listesini düzenlemek için Roles alanının yanındaki dişli (⚙️) ikonuna tıklayarak Role Management penceresini açabilirsiniz. Bu pencereden yeni rol ekleyebilir, klasör oluşturabilir veya mevcut rolleri yönetebilirsiniz.

Unauthorized Behavior (Hide / Disable)

Kullanıcı gerekli role sahip değilse, elementin nasıl davranacağını Choose alanından belirleyebilirsiniz:

• Hide: Kullanıcı yetkili değilse element tamamen gizlenir ve ekranda görünmez.
• Disable: Element görünür kalır ancak tıklanamaz / kullanılamaz hâle gelir.

Bu ayar, yetkisiz kullanıcıların elementle nasıl karşılaşacağını yönetmeniz için kullanılır.

Visibility (Görünürlük)

• Always Visible: Element her zaman görünür.
• Hidden: Element gizlenir.
• Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.

Ayarı yapılandırmak için:

1. Ekrandaki elementi seçin.
2. Sağ kenardaki Properties panelini açın.
3. Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.

Editability (Düzenlenebilirlik)

• Enabled: Element düzenlenebilir.
• Disabled: Element düzenlenemez.
• Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.

Style Panel ile Arayüz Tasarımı

Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:

• Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
• Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
• Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
• Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
• Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.