Kullanıcı Kılavuzu

Flex Grid Kullanım Senaryosu

Flex Grid Kullanım Senaryosu

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.
No items found.

İlişkili diğer içerikler

No items found.

Sözlük

No items found.

Alt Başlıklar