Horizontal Grid elementi, uygulamanızda içerikleri yatay bir düzende sergilemenizi sağlar. Kullanıcılar, sağa veya sola kaydırarak ürünleri, kampanyaları veya kartları kolayca keşfedebilir. Özellikle ürün katalogları, kampanya bannerları ve içerik kartlarının yatay sergilenmesi için idealdir.

Kullanım Alanları

• Ürün listeleri (ör. ayakkabı, kıyafet),
• Kampanya bannerları,
• Haber kartları,
• Servis/özellik tanıtım alanları vb.

Horizontal Grid elementi, web ve mobil uygulamalarda desteklenir.

Erkek Ayakkabı Senaryosu

Bir erkek ayakkabı alışveriş uygulamasında, kullanıcıya ana sayfada:

• İlk olarak “Black Friday Discount” kampanyası banner’ı,
• Hemen altında ise Air Jordan 1 (90 $) ve diğer ayakkabı ürünleri yatay kaydırmalı grid içinde gösterilir.

Kullanıcı, parmağıyla sola-sağa kaydırarak veya ok butonlarını kullanarak ürünler arasında geçiş yapabilir.

Veri Kaynağı Bağlama

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

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

SELECT 'https://cdn.example.com/airjordan1.png' AS ImageUrl,        'Air Jordan 1' AS Title,        90.00 AS Price,        'Black Friday Discount' AS TagUNION ALLSELECT 'https://cdn.example.com/nike-collection.png',        'New Nike Collection Summer 2019',        120.00,        'New'UNION ALLSELECT 'https://cdn.example.com/adidas-boost.png',        'Adidas Ultra Boost',        150.00,        'Hot';

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom >  ShoesHorizontalGrid ’i seçin. 

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

• No Data Found Message → “Gösterilecek ürün bulunamadı.”
• Datasource → ShoesHorizontalGrid.
• Fade → Slayt geçişlerinde efekt uygular.
• Hover Font Color → Ürün kartına gelindiğinde yazı rengi değişir.
• Hover Bg Color → Ürün kartına gelindiğinde arka plan değişir.
• Slide To Scroll → Her kaydırmada geçilecek ürün sayısı (örn. 1).
• Slide To Show → Aynı anda gösterilecek ürün sayısı (örn. 2).
• Swipe → Mobilde parmak hareketi ile kaydırma.
• Vertical → Açık bırakılırsa ürünler dikey dizilir (bu senaryoda kullanılmaz).
• Pause On Dots Hover → Alt noktaların üstüne gelindiğinde autoplay durur.
• Autoplay → Ürünler otomatik kayar (kampanyalar için önerilir).
• Autoplay Speed → Geçiş süresi, örn. 3000 ms.
• Show No Data Found Image → Veri yoksa yedek görsel gösterir.
• Arrow Color → Sağ/sol okların rengini belirler.

Senaryo Adımı Tamamlandığında

• Kullanıcı, Air Jordan 1 (90 $) kampanya kartını ve diğer ayakkabıları yatay kaydırmalı gridde görür.
• Slaytlar otomatik olarak her 3 saniyede kayar, kullanıcı manuel olarak oklarla veya parmak hareketiyle geçiş yapabilir.
• Kampanya etiketleri (“Black Friday Discount”, “New”, “Hot”) ürünlerin üstünde küçük badge olarak görünür.
• Mobilde tek ürün kartı, tablette 2, masaüstünde 3 ürün kartı aynı anda gösterilir.

Kısıtlamalar

• Çok fazla ürün yüklendiğinde kaydırma performansı düşebilir.
• Görseller optimize edilmezse yükleme süresi uzayabilir.
• Autoplay hızı çok düşük ayarlanırsa kullanıcı ürünleri kaçırabilir.

İpuçları ve Best Practices

• Slide To Show değerini cihaz tipine göre ayarlayın (mobil → 1, tablet → 2, desktop → 3).
• Autoplay’i sadece kampanya kartları için aktif edin.
• Kullanıcı deneyimi için ok butonlarını ve swipe özelliğini birlikte etkinleştirin.
• Hover renklerini, ürün kartlarıyla kontrast oluşturacak şekilde seçin.
• Görselleri 400x400px boyutlarında, 200 KB altında tutarak performansı artırın.