Flex Grid elementi, içerikleri esnek bir ızgara yapısı içinde düzenlemenizi sağlar. Bu senaryoda kullanıcıya ait beceri etiketleri (skills) yatay/dikey esnek düzenle sergilenmektedir.
Kullanım Alanları
Kullanıcı profillerinde beceri/etiket gösterimi,
Blog yazılarında etiket listeleri,
Ürün özellikleri veya kategori etiketleri,
Dinamik rozet/badge sunumları vb.
Flex Grid elementi web ve mobil uygulamalarda desteklenir.
Kullanıcı Becerileri Senaryosu
Bir profil uygulamasında, kullanıcıya ait beceriler Flex Grid içerisinde renkli etiketler halinde gösterilir.
Profil kartında kullanıcının adı ve açıklaması yer alır.
Alt bölümde, eğitim süresince kazanılan beceriler renkli badgeler olarak listelenir.
Flex Grid, etiketleri yan yana ve gerektiğinde satır kırılarak düzenler.
Veri Kaynağı Bağlama
Datasources modülüne gidin.
Tables başlığı yanındaki + ikonuna tıklayın ve tabloya UserSkills adını verin.
Aşağıdaki tabloyu oluşturun.
Ardından SQL Actions’a tıklayın ve aksiyona UserSkills ismini verin. C# ile de oluşturabilirsiniz.
Aşağıdaki SQL komutunu girin.
SELECT NEWID() AS Id, 'John Doe'AS UserName, 'Here are the skills I have obtained during my education'AS Description, 'Lorem'AS Skill, '#FF6B6B'AS ColorHexUNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Ipsum', '#FFD93D'UNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Dolor', '#6BCB77'UNION ALLSELECT NEWID(), 'John Doe', 'Here are the skills I have obtained during my education', 'Sit', '#4D96FF';
UI Design Modülü işlemleri
Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın.
Ardından Custom > UserSkills’i seçin.
Özelliklerin Senaryo Bağlamında Kullanılması
No Data Found Message
Açıklama: Veri kaynağında skill bulunmadığında gösterilecek mesaj.
Kullanım: “Henüz beceri eklenmedi.”
Data Source
Açıklama: Flex Grid içinde gösterilecek beceri listesinin kaynağı.
Kullanım: UserSkills tablosu.
Show No Data Found Image
Açıklama: Veri olmadığında yedek görsel gösterir.
Kullanım: Boş profil ikonu eklenebilir.
Senaryo Adımı Tamamlandığında
Kullanıcı adı ve açıklaması üstte gösterilir.
Flex Grid içinde Lorem, Ipsum, Dolor, Sit… gibi beceri etiketleri renkli badge formatında listelenir.
Mobilde etiketler satır kırılarak düzenlenir, masaüstünde daha fazla etiket aynı satıra sığar.
Kısıtlamalar
Çok uzun skill isimlerinde etiketlerin taşması olabilir.
Çok sayıda skill olduğunda mobil ekranlarda okunabilirlik azalabilir.
Renk kontrastı doğru ayarlanmazsa erişilebilirlik düşer.
İpuçları ve Best Practices
Skill etiketlerinde dinamik renkler kullanarak görsel çeşitlilik sağlayın.
Uzun etiketlerde kısaltma veya tooltip ile destekleyin.
Kullanıcı adı ve açıklamayı sabit, etiketleri esnek tasarlayın.
“No Data Found Message” ve yedek görsel mutlaka eklenmeli.
Mobil uyum için etiketlerin auto-wrap özelliğini test edin.