Badge
Badge elementinin işlevine göz atın.
Badge elementi, kullanıcı arayüzünde küçük bir alan veya simge şeklinde görünen metin veya sayısal değeri temsil eder. Genellikle bilgilendirici veya bildirim amaçları için kullanılır. Bir uygulama veya web sitesi üzerinde Badge elementleri, kullanıcılara belirli bir bilgiyi veya durumu göstermek için kullanılır. Çoğunlukla içine eklenen bir bildirim ikonu ile ilgili uygulama da bulunan bildirim sayısını gösterir.
Badge Ekleme
Badge elementini uygulamanız içerisine eklemeniz oldukça kolay. Badge elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir.
Badge elementini ekrana sürükleyin ve bırakın.
Badge elementine tıklayarak açılan Properties paneli içerisinden özelleştirebilirsiniz.
Badge, mobil ve web uygulamaları desteklemektedir.
Badge Elementinin Kullanılabilecek Alanları
Badge elementinin uygulama geliştirme sürecindeki işlevleri:
Bildirim Sayısı: En yaygın kullanım, bildirim sayısını göstermektir. Örneğin, bir sohbet uygulamasında kaç yeni mesajınız olduğunu veya bir e-posta istemcisinde okunmamış e-posta sayısını gösterebilir.
Durum Göstergesi: Badge elementleri, belirli bir nesnenin durumunu göstermek için kullanılabilir. Örneğin, bir to-do listesi uygulamasında tamamlanmamış görevlerin sayısını gösterebilir.
İzin Durumu: Kullanıcı izinlerini yönetirken, badge elementleri belirli bir izinin etkin veya pasif durumunu göstermek için kullanılabilir. Örneğin, bir uygulama kamera iznini göstermek için bir badge kullanabilir.
Sosyal Ağ Bildirimleri: Sosyal medya uygulamalarında bildirim sayısı veya yeni etkileşimler (beğeniler, yorumlar, paylaşımlar) gibi bilgileri göstermek için kullanılır.
Harita veya Yolculuk Uygulamaları: GPS veya harita uygulamalarında kullanıcıya yolculuk mesafesi, hedefe kalan süre veya yönlendirmeler gibi bilgileri göstermek için badge elementleri kullanılabilir.
Oyunlar: Oyunlarda kullanıcıların oyun içi başarıları veya puanları göstermek için kullanılabilir.
Badge elementine bir Container elementi gibi birden fazla element eklenebilir. Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz. Properties paneli içerisinde count, showzero, max, dot, Authorization ve Visibility propertyleri ile gelmektedir.
Count
Count alanına statik bir değer ekleyebileceğiniz gibi Symbol Picker aracılığıyla bir durumu, Input element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.
Show Zero
Örnek olarak bildirim sayısının 0 (sıfır) olduğu durumda da gösterilip gösterilmeyeceğini ayarlayabilirsiniz. Bu gösterimi Symbol Picker aracılığıyla bir durumu, Input element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.
Max
Alabileceği en fazla değeri belirleyebilirsiniz. Max alanına statik bir değer ekleyebileceğiniz gibi Symbol Picker aracılığıyla bir durumu, Input element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.
Dot
İlgili değer adedine bakılmadan sayısal gösterim yerine sadece bir nokta olarak gösterilmesini sağlayabilirsiniz.
Badge elementi için yetkilendirme seçeneklerini kullanabilirsiniz.
Elementlerde Authorization ekleme işlemlerini detaylı incelemek için tıklayın.
Kullanıcı rollerine göre veya ekran rollerine göre Authorization işlemlerini detaylı incelemek için tıklayın.
Elementler de visibility yani görünürlük, belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar. olduğunu kontrol etmek için kullanılan bir özelliktir. Bu özellik genellikle uygulama tasarımında veya işlevselliğinde kullanılır.
Badge elementi için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini visibility seçeneklerini kullanabilirsiniz.
Elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Kuika, Authorization, Condition, Device, Export, GeoLocation, Invers, Local Storage, Multi Language, Navigation , Notification, Payment Stripe, UI Control, Trigger ve Process Automation gibi sistem aksiyonlarını barındırmaktadır.
Badge elementine ekleyebileceğiniz aksiyonları +Add Action ile ekleyebilirsiniz.
Badge elementine veya diğer elementlere aksiyon ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Badge elementini Styling paneli ile özelleştirebilirsiniz.
Badge elementine Layout (Düzen),Text (Metin), Border (Kenarlık), Fill (Dolgu) veya Shadow (Gölge) ekleyerek ek düzenlemeler yapabilirsiniz.
Badge elementi içerisinde Layout, sadece Padding olarak kısmi olarak desteklenmektedir. Size, Min size, Align ve Display alanları desteklenmemektedir. Styling panelinde desteklenmeyen alanlar pasif olarak görüntülenmektedir. Ancak Badge elementi içerisine eklenen elementlerde Layout ekleme işlemlerini yapmanız mümkündür. Detaylı öğrenmek için tıklayın.
Badge yazısına ait renk (color) ve boyut gibi özellikleri Text (Metin) bölümü ile ayarlayabilirsiniz.
Badge elementi, Text (Metin) içerisinde yer alan Family, Style, Size/Color, Spacing, Options alanlarını desteklemektedir.
Elementlerde Text ayarları ile ilgili detaylı bilgi edinmek için tıklayın.
Badge elementinin arka planına (background) renk veya görseli Fill (Dolgu) ile ekleyebilirsiniz.
Elementlere Fill (Dolgu) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Badge dış kenarlarına Border (kenarlık) ekleyebilir, köşe eğimleri (Radius) verebilirsiniz.
Elementlere Border (Kenarlık) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Web uygulamalar içerisinde Row element kullanımında Shadow ile gölge efekti ekleyebilirsiniz.Mobil uygulamalar içerisinde Shadow görüntülenmemektedir.Dolayısıyla Shadow eklenmemektedir.
Row elementine Shadow (Gölge) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Last updated
