Kuika’nın Label elementi, kullanıcı arayüzünde metin, açıklama veya bilgi sunmak için kullanılan temel ve en sık kullanılan UI elementlerinden biridir. Bir uygulamada kullanıcıya gösterilmesi gereken statik veya dinamik bilgiler Label aracılığıyla iletilir. Form alanlarını açıklamak, başlık eklemek, durumsal mesajlar göstermek veya diğer UI elementlerini desteklemek için kullanılabilir.
Label elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Form Alanlarını Açıklama: Form içindeki TextInput, Selectbox, Checkbox gibi alanların ne amaçla kullanıldığını belirtmek için “Ad”, “Telefon”, “Departman” gibi etiketler eklemek.
Dinamik Veri Gösterimi Bir aksiyondan dönen değerleri, API sonuçlarını veya veri tablosundaki alanları Symbol Picker ile bağlayarak kullanıcıya dinamik içerik göstermek. Örneğin: "Toplam Sipariş Sayısı: 42"
Başlık veya Alt Başlık Kullanımı: Sayfa, kart veya bölüm başlıklarını göstermek. Örneğin: “Genel Bilgiler”, “Özet”, “İşlem Detayları”.
Durum / Uyarı / Bilgi Mesajları Gösterme: İşlem sonucu, hata mesajı, yönlendirme metni veya kullanıcıya açıklayıcı bilgi sunmak. Örneğin: “Kayıt başarıyla tamamlandı”, “Lütfen tüm alanları doldurun”.
Tablo İçerisinde Veri Gösterimi: Table elementi içinde her satırın bilgisini göstermek üzere dinamik Label kullanımı.
Buton veya İkonlarla Birlikte Açıklama Eklemek: Aksiyon butonlarının yanına kısa açıklamalar eklemek. Örneğin: “Sil (Geri alınamaz)”, “Ayarlar”.
Kısa Bilgi Etiketleri / Badge Benzeri Kullanımlar: Küçük açıklamalar, kategori etiketleri, kullanıcı rolleri veya durum bilgilerini göstermek. Örneğin: “Aktif”, “Admin”, “Yeni”.
2. Temel Özellikler
Statik Metin Gösterimi: Kullanıcıya açıklama, başlık, bilgilendirme veya yönlendirme amacıyla sabit metinler görüntülenebilir.
Dinamik Veri Gösterimi: Symbol Picker aracılığıyla bir aksiyon sonucu, veri tablosu alanı, hesaplanmış değer veya kullanıcı girdisi Label’a bağlanabilir. Örneğin: “Toplam Tutar: {{OrderTotal}}”
Metin Biçimlendirme Desteği: Label üzerindeki metin, harf boyutu, renk, hizalama, kalınlık ve diğer stil ayarlarıyla özelleştirilebilir.
Diğer Elementlerle Birlikte Esnek Kullanım: Button, Icon, Panel, Row ve Horizontal Grid gibi elementlerin içinde açıklayıcı veya tamamlayıcı bilgi göstermek için kullanılabilir.
2.1. Label Elementi Özellikleri
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.
Writing Mode: Metnin hangi yönde görüntüleneceğini belirler.
Horizontal: Metin soldan sağa, standart yatay şekilde gösterilir.
Vertical: Metin dikey olarak gösterilir.
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.
Android uygulamalarda kullanılan Label elementi için artık yalnızca bold değil, diğer font weight stilleri de desteklenmektedir. Bu sayede daha esnek ve özelleştirilebilir metin stili seçenekleri sunulmaktadır.
Label elementi, kullanıcıların bir uygulamadaki bilgileri hızlı ve anlaşılır bir şekilde algılamalarını sağlar. Ayrıca, farklı veri türlerini belirli bir formatta sunarak, uygulamanızın daha düzenli ve profesyonel görünmesine katkıda bulunur.
2.2. Elemente Eklenebilen Aksiyonlar
Label elementi, kullanıcı etkileşimi gerektiren senaryolarda tıklama olayını yakalayabilir. Bu sayede Label, yalnızca metin göstermekle kalmaz; aynı zamanda bir buton gibi davranarak işlem başlatabilir.
Label elementine eklenebilen tek aksiyon tetikleyicisi onClick’tir.
onClick
Kullanıcı Label üzerine tıkladığında çalışır. Bu tetikleyici sayesinde Label, bir aksiyonu başlatmak veya başka bir ekrana yönlendirmek için kullanılabilir.
Kullanım Senaryoları:
Bilgi metnine tıklandığında detay ekranı açmak
"Daha Fazla Göster" gibi bir metni tıklanabilir hale getirmek
Bir sayfa geçişi (Navigate) tetiklemek
Pop-up açmak
Kullanıcıya onay/uyarı mesajı göstermek
3. Label Elementi Nasıl Kullanılır?
Bu bölümde Label elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.
Senaryo: Giriş Yapan Kullanıcı ve Tutar Bilgisi Gösterimi
Bir uygulamada, giriş yapan kullanıcının Ad Soyad bilgisi ile birlikte kendisine ait güncel tutar bilgisinin sayfanın sağ üst köşesinde sabit olarak gösterilmesi, kullanıcının uygulama içerisindeki durumunu hızlıca anlamasını sağlar. Kullanıcı farklı sayfalara geçiş yaptığında bu bilgiler görünür kalır ve ek bir işlem yapmadan güncel veriye erişebilir.
Senaryoda:
Ad Soyad ve Tutar bilgileri veri kaynağından alınır.
Her bilgi ayrı Label elementi ile gösterilir.
Label’lar sayfanın üst köşesinde konumlandırılır.
Bilgiler sadece okuma amaçlı sunulur ve kullanıcı etkileşimi içermez.
Adım 1 - Dinamik Kullanım için Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek için:
Bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Label elementi Horizontal Stack içerisine eklendiğinde varsayılan olarak 100 px Width değeri ile gelir. Otomatik boyutlandırma kullanmak için Label > Styling > Layout > Width alanındaki değeri temizleyebilirsiniz. Mevcut senaryoda tüm Label elementlerinde temizlenmiştir.
Label içerisindeki yazıyı Label > Properties > Value > “Ad Soyad:” olarak güncelleyin.
Yazı kalınlığını Label > Styling > Text > Weight > Medium olarak ayarlayın.
Ad Soyad Label elementi yanına Horizontal Stack içerisine Elements > Display > Label elementini sürükleyip bırakın.
Ekranda uzun yazıları belirli uzunlukta göstermek için Label > Properties > MaxLine > 100 olarak ayarlayın.
Label elementi yanındaki boşluğa tıkladığınızda Horizontal Stack elementi seçilecektir. Açılan seçeneklerden Duplicate’e basın.
Yeni eklediğimiz Ad Soyad yazısını Label > Properties > Value > “Tutar:” olarak güncelleyin.
Ad soyad yanındaki Label elementine tıklayın ve Label > Properties > Value > Action Results > GetUserInfo > First > UserName tanımlamasını yapın.
Tutar yanındaki Label elementine tıklayın ve Label > Properties > Value > Action Results > GetUserInfo > First > Price tanımlamasını yapın.
Yazı formatını Label > Properties > Formatter > Money- Tl -Var - 1 olarak ayarlayın.
Preview
Uygulama test edildiğinde, aktif kampanyanın bitiş süresine kalan zamanın Countdown elementi üzerinde saat:dakika:saniye formatında anlık olarak geri sayım şeklinde görüntülendiği görülür. Kampanya süresi ilerledikçe sayaç otomatik olarak azalır ve süre tamamlandığında geri sayım sıfırlanarak kampanyanın sona erdiği kullanıcıya net bir şekilde yansıtılır.
4. Ortak Özellikler (Properties)
Label elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Dinamik veri bağlarken boş değerleri kontrol edin. Symbol Picker ile gelen değerler null olabilir. Bu durumlarda placeholder benzeri bir metin göstermek kullanıcı deneyimini iyileştirir.
Label’ı başlık ve içerik düzenlerinde hiyerarşi oluşturmak için kullanın. Başlık, alt başlık ve açıklama metinlerini farklı font size/weight değerleriyle yapılandırabilirsiniz.
Form alanlarında açıklayıcı metin olarak kullanırken kısa ve anlaşılır olun. Form iletişim metinleri sade ve yönlendirici olmalıdır.
6. Kısıtlamalar
Label elementi yalnızca metin göstermek için tasarlanmıştır. Karmaşık içerikler (görsel, video, HTML parse edilmiş içerik vb.) için uygun değildir.
Label üzerinde dahili düzenleme (inline edit) yapılamaz. Kullanıcı metni doğrudan Label üzerinden değiştiremez. Bu senaryolar için Text Input veya EditableTableColumn kullanılmalıdır.
Birden fazla aksiyon tetikleyici desteklemez. Label üzerinde yalnızca onClick event'i bulunmaktadır.
