Kuika’nın Tab elementi, uygulamalarda farklı içerikleri sekme yapısıyla düzenli bir şekilde sunmayı sağlar. Kullanıcılar sekmeler arasında geçiş yaparak aynı ekran üzerinde farklı veri gruplarına hızlıca ulaşabilir. Bu yaklaşım, hem sade hem de kullanıcı dostu bir arayüz deneyimi oluşturur.

Tab elementi hem web hem de mobil uygulamalarda desteklenir. Ayrıca Nested Tab desteği sayesinde Web ve Android uygulamalarda sekme içinde sekme kullanılabilir.

Kullanım Alanları

• İçerik Yönetimi → Aynı sayfada farklı veri gruplarını göstermek
• Proje Takibi → Görev durumlarını (All, In Progress, Reviewing, Complete) kategorilere ayırmak
• Formlar & Ayarlar → Farklı ayar alanlarını sekmelere bölmek
• Navigasyon → Farklı ekranlara geçmeden sekmelerle sayfa içi geçiş yapmak
• Analitik & Raporlama → Farklı grafik veya veri tablolarını tek ekranda sunmak

Kullanım Senaryosu – Görev Durumu Görünümü

Bir proje yönetimi uygulamasında Tab elementi, görevlerin durumuna göre kategorilere ayrılmasını sağlar.

• All → Tüm görevlerin listesi
• In Progress → Devam eden görevler
• Reviewing → Kontrol aşamasındaki görevler
• Complete → Tamamlanmış görevler

Kullanıcı sekmeler arasında geçiş yaptığında, yalnızca o duruma ait görevleri görür. Her sekme, görev kartlarını renkli durum etiketleriyle (Badge) birlikte görüntüler.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements > Interactive kategorisinden Tab elementini seçin.
3. Çalışma alanına sürükleyip bırakın.
4. Her sekme için içerikleri tanımlayın (örneğin: görev listesi, tablo veya kart görünümü).
5. Sekme başlıklarını düzenleyin:

• TabItem1 → All
• TabItem2 → In Progress
• TabItem3 → Reviewing
• TabItem4 → Complete

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

• Tab
  
  • Açıklama: Yeni sekme ekleme, mevcut sekmeyi silme veya sırasını değiştirme alanıdır.
  • Kullanım: +Add Tab Item seçeneği ile yeni sekmeler oluşturabilirsiniz.
• Type
  
  • Açıklama: Sekme başlıklarının görünüm tipini belirler (örneğin çizgi veya kutu stili).
• Tab Position
  
  • Açıklama: Sekmelerin konumunu belirler.
  • Seçenekler:
    
    • Top → Üst kısımda (varsayılan)
    • Bottom → Alt kısımda
    • Left → Sol kenarda
    • Right → Sağ kenarda
• Selected Tab Color
  
  • Açıklama: Aktif sekmenin çizgi ve yazı rengini tanımlar.
  • Örnek: #4B7CF3 (mavi ton).
• TabItem – Label
  
  • Açıklama: Sekme başlığında görüntülenecek metindir.
  • Kullanım: Properties panelinde sekme seçilerek metin düzenlenebilir.

Dinamik Kullanım – Datasource ile Sekme Bağlama

Tab elementi, Datasource filtreleri ile dinamik olarak kullanılabilir.
Örneğin, görev durumlarını farklı sekmelere bağlamak için:

1. Datasources modülüne gidin.
2. Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “Tab” ismini verin. 

3. Aşağıdaki tabloyu oluşturun. 
4. Ardından SQL Actions’a tıklayın ve aksiyona “TabActions” ismini verin. C# ile de oluşturabilirsiniz.
5. Aşağıdaki SQL komutunu girin.‍
6. Tab elementi → Symbol Picker’dan Tab.SelectedLabel değişkenini bağlayın.
7. Her sekme seçildiğinde sadece o duruma ait görevler gösterilir.

SELECT * FROM Tasks WHERE Status = @{Tab.SelectedLabel}

Senaryo Tamamlandığında

• Kullanıcı sekmeler arasında geçiş yaparak görevleri durumlarına göre görüntüler.
• Aktif sekme vurgulanır, altındaki çizgi renk değiştirir.
• Her sekmede yalnızca ilgili veri grubu görüntülenir.
• Nested Tab desteği ile detay sayfalarında alt sekmeler de kullanılabilir.

Kısıtlamalar

• Çok fazla sekme kullanımı arayüzü kalabalık hale getirebilir.
• Nested Tab özelliği iOS uygulamalarda desteklenmez.

İpuçları & Best Practices

Sık yapılan hata: Uzun sekme başlıkları kullanmak → Dar ekranlarda taşma yaratır.

• Sekme renkleri uygulamanın genel temasına uygun seçilmelidir.
• İçerikleri kategori bazında bölmek, kullanıcıya net bir bilgi akışı sağlar.
• Nested Tab yapısı, karmaşık ayar veya yönetim ekranlarında düzenli görünüm sağlar.