Kuika’nın Badge elementi, kullanıcı arayüzünde belirli bir bilgiyi vurgulamak, öne çıkarmak veya hızlı şekilde iletmek için kullanılan küçük, dikkat çekici bir etiket elementidir. Çoğunlukla sayı, durum bilgisi, uyarı veya bildirim göstergesi olarak kullanılır. Badge, kullanıcıların uygulamadaki önemli bilgileri kaçırmasını önler ve etkileşim alanlarını daha görünür hale getirir.
Badge elementi; ikonların, butonların, kartların veya diğer UI elementlerinin üzerine yerleştirilebilir ve böylece hızlı bir görsel bildirim alanı oluşturur.
Badge elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Badge elementi, küçük fakat dikkat çekici yapısı sayesinde birçok farklı senaryoda kullanılabilir. Aşağıda en yaygın kullanım alanları listelenmiştir:
Bildirim ve Mesaj Yönetimi: Uygulamalarda okunmamış mesaj, bildirim, davet veya görev sayısını göstermek için kullanılır. Örneğin, bir mesaj ikonunun üzerinde “3” gibi bir badge görünür.
Görev ve İş Listeleri: Tamamlanmamış görev sayısı, bekleyen iş adedi veya yapılması gerekenler listesinde kalan ögeleri göstermek için kullanılabilir.
Durum ve Uyarı Göstergeleri: Sistem uyarıları, hatalar, bekleyen onaylar veya kritik durumları vurgulamak için kullanılabilir. Örneğin kırmızı bir badge hata sayısını gösterebilir.
E-ticaret Uygulamaları: Sepetteki ürün adedi, favorilere eklenen ürün sayısı veya kampanya bildirimleri için sıklıkla tercih edilir.
Sosyal Medya Fonksiyonları: Yeni yorum, beğeni, takip isteği veya mesaj sayısını göstermek için ikonlarla birlikte kullanılır.
2. Temel Özellikler
Kompakt ve dikkat çekici etiket yapısı: Küçük boyutlu ancak görsel olarak öne çıkan bir etiket sunarak kullanıcıların önemli bilgileri hızlıca fark etmesini sağlar.
Dinamik veri bağlama desteği: Badge içerisinde gösterilecek değer, Symbol Picker aracılığıyla veri kaynaklarına veya aksiyon sonuçlarına bağlanabilir. Böylece Badge, değişen veriye göre otomatik olarak güncellenir.
İkonlarla kullanılabilme: Badge elementi, genellikle Image, Icon veya Button gibi elementlerin köşesine eklenerek daha etkili bir bildirim veya uyarı görünümü oluşturur.
2.1. Badge Elementi Özellikleri
Badge elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Count: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla bir durumu, Input elementinin içeriğini ya da bir aksiyon sonucuna ait değeri dinamik olarak alabilirsiniz.
Show Zero: Bildirim sayısı sıfır olduğunda Badge’in gösterilip gösterilmeyeceğini belirler. Bu ayar, Symbol Picker aracılığıyla da dinamik olarak yapılandırılabilir.
Max: Badge’in gösterebileceği en yüksek değeri belirler. Statik bir değer girebilir veya Symbol Picker ile dinamik bir değer atayabilirsiniz. Örneğin, maksimum değer 99 ise, bu sayının üzerindeki değerler "99+" şeklinde görüntülenir.
Dot: Sayısal gösterim yerine yalnızca bir nokta olarak görünmesini sağlar. Bu ayar, genellikle sayısal bir değere ihtiyaç duyulmayan bildirimler için kullanılır.
2.2. Badge Elementine Eklenebilen Aksiyonlar
Badge elementi, yalnızca görsel bir gösterim amacı taşıdığı için aksiyon tanımlamayı desteklemez. Elementi seçtiğinizde sağ panelde ADD ACTION butonu görünmez ve Badge üzerine kullanıcı etkileşimi ile tetiklenen herhangi bir event eklenemez.
Aşağıdaki noktalar Badge elementinin aksiyon yapısını açıklar:
Badge, bir tıklama, değişim veya etkileşim sonucunda aksiyon çalıştırmaz.
Bildirim tıklama senaryoları gibi etkileşimler gerekiyorsa bu işlem Badge’in bulunduğu Container, Panel, Icon veya Button üzerinden yapılmalıdır.
Badge yalnızca görsel bir sayısal/durum göstergesi olarak çalışır; bir iş akışı başlatma özelliği yoktur.
Badge kendi içinde işlem başlatmaz; yalnızca gösterim yapar.
3. Badge Element Nasıl Kullanılır?
Bu bölümde Kuika uygulamalarında Badge elementinin uçtan uca kullanımını, örnek bir senaryo üzerinden ele alacağız.
Senaryo: Mesaj Bildirimleri için Badge Kullanımı
Bir sohbet veya iş birliği uygulamasında, kullanıcıların yeni gelen bildirimleri uygulamayı açmadan fark edebilmesi önemlidir. Bu amaçla mesaj ikonunun üzerine konumlandırılmış bir Badge elementi kullanılır.
Bu senaryoda:
Badge, bildirim ikonunun sağ üst köşesinde konumlandırılır.
Badge üzerinde, kullanıcıya ait okunmamış bildirim sayısı dinamik olarak gösterilir.
Okunmamış bildirim yoksa Badge gizlenir.
Çok yüksek bildirim sayıları için üst sınır belirlenerek sade bir görünüm sağlanır.
Adım 1 – Dinamik Kullanım İçin Aksiyon Oluşturma
Data Sources Modülünde Tablo Tanımlama
Datasources modülüne gidin.
Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “UserMessages” ismini verin.
Aşağıdaki tabloyu oluşturun.
Ardından SQL Actions’a tıklayın ve aksiyona “UnreadMessageCount” ismini verin.
Ardından Tables başlığı yanındaki + ikonuna tıklayın.
Yeni SQL Action’a tıklayın.
Aksiyon adını UnreadMessageCount olarak belirleyin.
Aşağıdaki SQL sorgusunu ekleyin:
SELECT COUNT(*) AS UnreadMessagesFROM ( VALUES (0), (0), (1), (0)) AS Messages(IsRead)WHERE IsRead = 0;
Adım 2 – Sayfaları Oluşturma
UI Design modülünü açın:
Sol yan panelde Screens bölümünden “Okunmamış Bildirimler” adında yeni sayfa oluşturun.
Örneğin, Okunmamış Bildirimler için sayfayı aşağıdaki şekilde oluşturabilirsiniz.
Adım 3 -UI Design Modülünde Badge Kullanımı
UI Design modülünü açın.
İlgili ekranda Add Action butonuna tıklayın.
Page Init Action eklemek için Add Action > Initial Action > Managed DB > Custom > UnreadMessageCount adımlarını takip edin.
Sol yan panelden Elements > Display > Icon elementine tıklayın. Element otomatik olarak eklenecektir.
Badge elementini sürükleyerek bildirim ikonunun üzerine bırakın.
Bu yapı ile Badge, yalnızca okunmamış mesaj olduğunda görüntülenir.
Preview
Uygulama test edildiğinde:
Kullanıcı, mesaj ikonunun köşesinde okunmamış mesaj sayısını gösteren bir Badge görür.
Okunmamış mesaj yoksa (Show Zero kapalıysa) Badge görünmez.
Yüksek mesaj sayıları Max değeri sayesinde 99+ şeklinde gösterilir.
Mobilde sade bir deneyim için Dot formatı kullanılabilir.
4. Ortak Özellikler (Properties)
Badge 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:
Renkleri Styling Panel’inin Fill alanından statüye göre kategorize edin. Örneğin:
Kırmızı → Uyarı / kritik bildirim
Mavi → Bilgilendirme
Yeşil → Başarılı / pozitif durum
Sayıları okunabilir seviyede tutun. 99+, 999+ gibi sınırlar belirlemek kullanıcı deneyimini iyileştirir; gereksiz uzun sayıların görünmesini engeller.
Badge’i etkileşimli bir elementle birlikte kullanın. Badge kendi başına aksiyon alamadığı için, tıklanabilir alanı (Icon, Button, Panel) onun etrafında konumlandırın.
6. Kısıtlamalar
Badge elementi aksiyon desteklemez. ADD ACTION butonu yoktur; Badge tıklanamaz ve herhangi bir event tetiklemez.
Badge yalnızca görsel bir göstergedir. Sayı veya durum bilgisini gösterir; doğrudan işlem başlatamaz.
Badge’in görünürlüğü tamamen veri akışına bağlıdır. Veri güncellenmezse Badge de kendini yenilemez.
