Marquee elementi, içeriği yatay olarak kaydırarak önemli bilgileri öne çıkarmanızı sağlar. Kullanıcılar, sürekli hareket eden bu içerik sayesinde güncel bilgileri kaçırmadan görebilir. Özellikle duyurular, kampanyalar veya finans verileri için kullanılır.

Kullanım Alanları

• Döviz ve kripto para kurları,
• Finansal göstergeler (Borsa endeksi, altın fiyatı vb.),
• Kampanya ve duyuru metinleri,
• Haber başlıkları vb.

Marquee elementi, web uygulamalarda desteklenir.

Döviz Kurları Senaryosu

Bir finans uygulamasında, kullanıcıya anlık döviz kurları Marquee ile gösterilir. USD, EUR, GBP, JPY gibi para birimleri yatay kayar. Kullanıcı ekranı beklemeden tüm kurları görür.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya ExchangeRates ismini verin.
3. Aşağıdaki tabloyu oluşturun.

4. Ardından SQL Actions’a tıklayın ve aksiyona ExchangeRates ismini verin. C# ile de oluşturabilirsiniz.
5. Aşağıdaki SQL komutunu girin. 

SELECT 'USD' AS Currency, '$' AS Symbol, 35.77 AS RateUNION ALLSELECT 'EUR', '€', 37.30UNION ALLSELECT 'GBP', '£', 44.50UNION ALLSELECT 'JPY', '¥', 0.25;

UI Design Modülü İşlemleri

1. UI Design modülünde Marquee elementini ekleyin.
2. İçerisine Flex Grid + Label ekleyerek para birimi, simge ve değeri bağlayın.
3. Properties panelinden veri kaynağını bağlayın:
   
4. Datasource → ExchangeRates
5. Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
6. Ardından Custom > ExchangeRates’ı seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• Speed → Döviz bilgilerinin kayma hızını ayarlayın.
• Auto Fill → Kurlar arasında boşluk kalmadan akışı sağlar.
• Pause On Hover → Kullanıcı imleci “EUR 37.30 ₺” üzerine getirdiğinde kayma durur.
• Pause On Click → Kullanıcı kurlardan birine tıkladığında kayma durur.
• Gradient Color → Sağ/sol kenarlarda gölge rengi belirlenir (örn. #f5f5f5).
• Gradient Width → Gölge kalınlığı ayarlanır (örn. 20px).

Flex Grid’de Düzenlenmesi Gereken Özellikler

• Datasource → Gösterilecek verinin kaynağı seçilir. ExchangeRates tablosu bağlanır.
• No Data Found Message  → Veri kaynağında döviz kuru bulunmadığında mesaj gösterir. Örnek: “Güncel kur bilgisi bulunamadı.”
• Show No Data Found Image  → Veri olmadığında yedek görsel gösterir. Finans ikonları ya da “no-data.png” gibi basit bir görsel eklenebilir.
• Grid Layout (Esneklik)  → Döviz kurları yan yana düzenlenir. Flex Grid içinde her satır Currency + Symbol + Rate üçlüsü olacak şekilde tasarlanır.
• Responsive Düzen → Mobil cihazlarda her satır tek kolon, tablet/desktop’ta ise 2–3 kolon ayarlanabilir. Küçük ekranlarda USD / EUR alt alta görünürken, büyük ekranlarda yan yana akabilir.

Marquee + Flex Grid Senaryosunda Birlikte Kullanım

• Marquee → Kaydırma efektini yönetir (Speed, Auto Fill, Pause On Hover vb.).
• Flex Grid → İçeriği düzenli bir ızgara yapısında listeler (datasource, kolon ayarı, no-data mesajı).

Yani Marquee olmasa, Flex Grid statik döviz tablosu gibi çalışır. Marquee ile birleşince “kayan döviz kuru bandı” haline gelir.

Senaryo Adımı Tamamlandığında

• Kullanıcı, USD – EUR – GBP – JPY kurlarını sürekli kayan bir şerit halinde görür.
• İmleç üzerine gelince akış durur, kullanıcı istediği değeri daha rahat okur.
• Gradient efektleri, verilerin ekran kenarında estetik biçimde kaybolmasını sağlar.
• Hem mobil hem web’de aynı akış düzeni korunur.

Kısıtlamalar

• Performans: Çok fazla döviz kuru veya içerik eklendiğinde kaydırma performansı düşebilir.
• Okunabilirlik: Marquee Speed çok yüksek ayarlanırsa kullanıcı değerleri okuyamayabilir, çok düşük ayarlanırsa sıkıcı hale gelebilir.
• Responsive Sorunlar: Flex Grid’de kolon sayısı ayarlanmazsa, küçük ekranlarda metinler üst üste binebilir.
• Boş Veri Riski: Datasource boş geldiğinde eğer No Data Found Message veya görsel tanımlanmadıysa kullanıcıya boş ekran gösterilir.
• Gradient Kullanımı: Gradient genişliği çok yüksek ayarlanırsa içerik kenarlarda okunmaz hale gelebilir.
  
  

İpuçları ve Best Practices

• Marquee Hızı: Speed değerini 2000–4000 ms aralığında ayarlayın → hem okunabilir hem akıcı olur.
• Auto Fill: Mutlaka aktif edin → içerikler arasında boşluk kalmaz, akış sürekli görünür.
• Pause On Hover: Finansal verilerde kullanıcı deneyimi için olmazsa olmaz → kullanıcı imleci üzerine getirdiğinde kaydırma dursun.
• Gradient Tasarımı: Gradient rengini uygulamanın tema renkleriyle uyumlu seçin, genişliği 10–30 px arasında olsun.
• Flex Grid Düzeni: Döviz kuru kartlarını tek satır – yan yana olacak şekilde tasarlayın. Mobilde tek kolon, desktop’ta 2–3 kolon kullanın.
• Yedek Mesaj ve Görsel: “No Data Found Message” ve “No Data Found Image” mutlaka ekleyin → veri yokken boş ekran riski ortadan kalkar.
• Optimize İçerik: Döviz ikonları / görselleri düşük boyutlu (örn. <50 KB SVG veya PNG) olmalı → performans korunur.