Kuika’nın Panel elementi, kullanıcı arayüzünde içerikleri gruplandırmak ve düzenlemek için kullanılır. Panel, UI elemanlarını bir arada tutarak kullanıcıların belirli bir bölümde odaklanmasını sağlar. Dinamik arka planlar, kart yapıları, sayfa düzenleri ve bilgi kutuları için idealdir.

Panel elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Dashboard üzerinde kart yapıları oluşturmak,
• Profil bilgilerini kutucuklar halinde göstermek,
• Dinamik arka planlı bilgi panelleri hazırlamak,
• Form alanlarını gruplara ayırmak,
• Listeler veya tablo altı özet alanlarını düzenlemek vb. 

Panel’de Dynamic Background Kullanımı

‍

1. Dynamic Background Color

Adımlar:

• Kuika platformunda projenizi açın.
• UI Design modülünde → ekrana bir Panel elementi sürükleyip bırakın.
• Paneli seçtikten sonra sağ taraftaki Properties paneline gidin.
• Dynamic Background Color alanını bulun.
• Burada Symbol Picker kullanarak bir veri alanı seçin. (örn. WeatherType, StockStatus)
• Renk eşleştirmelerini tanımlayın:
  
  • Sunny → #FFD700 (sarı)
  • Cloudy → #6f42c1 (mor)
  • Rainy → #6c757d (gri)
• Veri kaynağından gelen değere göre Panel’in arka plan rengi otomatik değişir.

2. Dynamic Background Image

Adımlar:

• Yine bir Panel elementi seçin.
• Properties panelinde → Dynamic Background Image alanını bulun.
• Bu alanda veri kaynağındaki resim URL’sini seçin. (örn. WeatherImageUrl, UserProfilePhoto)
• Veri tablosuna uygun görsel bağlantıları ekleyin.
  
  • Sunny → https://cdn.site/sunny.jpg
  • Cloudy → https://cdn.site/cloudy.jpg
  • Rainy → https://cdn.site/rain.jpg
  • Arka plan, veri kaynağından gelen resme göre otomatik güncellenir.

3. Dynamic Font Color (Opsiyonel)

• Aynı şekilde Dynamic Font Color alanını kullanarak yazı rengini de veriye bağlayabilirsiniz.
• Örnek:
  
  • Positive → Yeşil
  • Negative → Kırmızı

4. Hover Ayarları

• Hover Background Color ve Hover Font Color alanlarından Panel’in üzerine gelindiğinde hangi renklerin değişeceğini belirleyebilirsiniz.

• Dynamic Background Color → veriye göre renk kodu atarsınız.
• Dynamic Background Image → veriye göre resim URL’si atarsınız.
• İkisi birlikte kullanıldığında Dashboard çok daha etkileşimli ve görsel hale gelir.

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

• Scrolling
  
  • Açıklama: Panel içeriğinin kaydırılabilir olup olmayacağını belirler.
  • Seçenekler: Hidden, Vertical, Auto, Horizontal
  • Örnek: Uzun bir listeyi Panel içine koyup Vertical scroll açmak.
• Scroll Back Color / Width / Radius
  
  • Açıklama: Kaydırma çubuğunun rengini, genişliğini ve köşe yuvarlatmasını ayarlayın.
• Dynamic Background Color
  
  • Açıklama: Arka plan rengini veri kaynağından gelen bilgilere göre dinamik olarak değiştirin.
  • Örnek: Stok azaldığında arka plan kırmızıya döner.
• Dynamic Font Color
  
  • Açıklama: Panel içindeki yazı rengini veriye göre ayarlayın.
  • Örnek: Pozitif değer → yeşil, negatif değer → kırmızı.
• Dynamic Background Image
  
  • Açıklama: Arka plana veri tablosuna bağlı görseller yerleştirin.
  • Örnek: Kullanıcı profili panelinde kişinin profil fotoğrafı.
• Hover Background Color / Hover Font Color
  
  • Açıklama: İmleç üzerine gelince arkaplan ve yazı rengini değiştirin.
  • Örnek: Hover olduğunda panel griden maviye dönüşür.

Senaryo Adımı Tamamlandığında

• Dashboard ekranında üç ayrı Panel görünür.
• Her panelin arka plan rengi, içerik durumuna göre dinamik olarak değişir.
• Kullanıcı, fare ile üzerine geldiğinde panel vurgulu hale gelir.
• İçerik uzun olduğunda scroll bar devreye girer.

Kısıtlamalar

• Çok fazla dinamik arka plan kullanmak performansı etkileyebilir.
• Mobil ekranlarda fazla geniş Panel tasarımları taşma yapabilir.

İpuçları ve Best Practices

• Panelleri farklı background color ile ayrıştırarak görsel kontrast oluşturun.
• Scroll özelliklerini sadece gerekli durumlarda aktif edin.
• Dashboard tasarımlarında panelleri Grid Layout ile hizalayın.
• Hover efektleri ile interaktif deneyim katın.