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

4. Sol kenardaki Elements panelinden, Display kategorisi altındaki Label elementini sürükleyerek ekranınıza bırakın.

• Label elementini boş bir alana sürüklerseniz, otomatik olarak bir Row elementi içinde eklenir.
• Bir Column içine sürüklerseniz, yalnızca Label elementi eklenir.
• Label elementini tüm Container tipindeki elementlere ekleyebilirsiniz.

Label elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.

• Value: Statik metni yazabileceğiniz alandır. Symbol Picker kullanarak, başka bir elementin değerini veya bir aksiyonun sonucunu dinamik olarak gösterebilirsiniz.
• Maxline: Metin uzunluğu ne olursa olsun, içeriğin belirli bir satır sayısına kadar gösterilmesini sağlar.
• Formatter: Gösterilecek içeriğin belirli bir formata veya düzene getirilmesini sağlar. Properties panelindeki açılır menüden aşağıdaki seçenekleri kullanabilirsiniz:
  
  • money: Para miktarını virgülden sonra 2 basamaklı kuruş ile gösterir. (Örn: 27.99)
  • money-var-1: Virgülsüz, kuruşsuz para miktarını gösterir. (Örn: 28)
  • money-4-decimal: Para miktarını virgülden sonra 4 basamaklı olarak gösterir. (Örn: 27.9999)
  • money-tl: TL sembolünü ekleyerek para miktarını gösterir. (Örn: 27,99 ₺)
  • phone: Telefon numarasını (999) 999-9999 formatında gösterir.
  • percent: Yüzde sembolünü ekleyerek yüzdeyi temsil eder. (Örn: %25)
  • fractional-2: Virgülden sonra 2 basamaklı sayı gösterir. (Örn: 3.14)
  • fractional-5: Virgülden sonra 5 basamaklı sayı gösterir. (Örn: 3.14159)
  • datetime: Tarihi ve saati DD/MM/YYYY HH:mm:ss formatında gösterir. (Örn: 20/10/2023 14:30:45)
  • date: Tarihi DD/MM/YYYY formatında gösterir. (Örn: 20/10/2023)
  • date-var-1: Tarihi DD:MM:YYYY formatında gösterir. (Örn: 20:10:2023)
  • short-date: Tarihi kısa formatta gösterir. (Örn: Oct 20)
  • time: Zamanı HH:mm:ss formatında gösterir. (Örn: 14:30:45)
  • time-ago: Belirli bir tarih ve zamanın ne kadar önce gerçekleştiğini gösterir. (Örn: 2 gün önce)

Tooltip: Kullanıcı, Label elementinin üzerine geldiğinde görünen açıklama metnini belirtir. Örneğin, bir "E-posta Adresi" etiketi üzerine gelindiğinde “Lütfen geçerli bir e-posta adresi girin” gibi bir açıklama gösterilebilir.

Authorization (Yetkilendirme)

• Anonymous Access: Kullanıcıların hesap bilgisi girmeden erişmesini sağlar.
• All Roles Access: Kullanıcıların hesap bilgileri doğrulanarak erişim sağlanır.
• Element düzeyinde yetkilendirme için Properties panelinden Authorization ayarlarını düzenleyin.

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.

Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.

Actions (Aksiyonlar)

Kuika, aşağıdaki sistem aksiyonlarını destekler:

• Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations.
• Kendi oluşturduğunuz SQL aksiyonlarını da kullanabilirsiniz.
• Aksiyon eklemek için Properties panelinden +ADD ACTION butonunu kullanabilirsiniz.

Actions desteği bazı elementlerde geçerli olmayabilir.