Kuika’nın Collapse elementi, içerikleri daha kompakt ve düzenli bir şekilde sunmanıza olanak tanır. Kullanıcılar başlıkların üzerine tıklayarak içeriği gösterebilir veya gizleyebilir. Özellikle uzun açıklamalar, SSS (Sıkça Sorulan Sorular) veya sadece gerektiğinde açılması gereken bilgi blokları için idealdir.

Collapse elementi yalnızca web uygulamalarında desteklenmektedir.

Kullanım Alanları

• Sıkça Sorulan Sorular (FAQ) → Sorular kapalı, kullanıcı tıklayınca cevap açılır.
• Uzun Açıklamalar → Kullanıcıya ilk bakışta sadece başlık gösterilir.
• Adım Adım İçerikler → Kullanıcı her aşamayı ayrı ayrı genişletebilir.
• Detaylı Bilgiler → Özet görünümle başlayıp, ihtiyaç halinde detayları açtırmak.

Kullanım Senaryosu – Yönetim Paneli Navigasyonu

Bu senaryoda, Collapse elementi kullanarak sol tarafta yer alan bir yönetim paneli menüsü (sidebar) oluşturacağız. Kullanıcı, “Management”, “Connection” veya “Customer” başlıklarına tıkladığında alt menüleri açıp kapatabilecek.

• Aşağıdaki yapı oluşturulacaktır:
  
  • Sol tarafta koyu mavi (navy) renkte bir menü, üstte “Dashboard” başlığı, altında kategoriler (Management, Connection, Customer)
  • Orta alanda kartlar ve grafiklerin bulunduğu dashboard ekranı.

UI Design Adımları

• UI Design modülüne gidin.
• Projenizde yeni bir sayfa oluşturun: DashboardPage
• Sayfayı ikiye ayırmak için Row elementi ekleyin.
  
  • Elements > Layout > Row
• Sol taraf sidebar, sağ taraf içerik alanı olacak.
• Sidebar için sol kolondaki Column’un Pading’i 16px olarak ayarlayın. 
• Sidebar başlığı (Dashboard) ekleyin.
  
  • Elements > Label
  • Text: “Dashboard”
  • Font Weight: Bold
  • Color: White
  • Margin Bottom: 12px
• Collapse elementini ekleyin.

• Elements > Interactive > Collapse
• Collapse Panel Header alanından “Management”, “Connection” ve “Customer” başlıklarını oluşturun. Her başlığa ilgili alt menüleri ekleyin:

• Management → Alt kısmındaki Collapse Panel’e Label elementi ekleyerek aşağıdaki başlıkları oluşturabilirsiniz: 
  
  • Document, Contact, Prospect, Workflow
• Connection → Chat Integration, Marketing, Email Integration
• Customer → Customer List, Transactions

• Accordion özelliğini aktif edin.
  
  • Collapse özelliklerinden Accordion = True
  • Böylece aynı anda sadece bir menü açık kalır.
• İkon ekleyerek kullanıcı deneyimini artırın.

• Başlıklara ChevronDown veya ChevronRight ikonları ekleyin.
• Dashboard içeriğini oluşturun (isteğe bağlı).
  
  • Sağ kolona kartlar veya grafik elementleri ekleyebilirsiniz (örnek: Area Chart, Card, Table).
  • Görseldeki gibi 2 satırda 3-2 kart yapısı için Grid kullanabilirsiniz.

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

• Collapse
  
  • Açıklama: Panellerin başlık ve içeriğini tanımladığınız alandır.
  • Kullanım: Menü başlıklarını (“Management”, “Connection”, “Customer”) buradan ekleyin.
• Destroy Inactive Panel
  
  • Açıklama: Kullanıcının yalnızca tek paneli açık tutmasını sağlar.
  • Kullanım: Yeni panel açıldığında diğerleri otomatik kapanır.
• Accordion
  
  • Açıklama: Panelleri düzenli ve sade tutar.
  • Kullanım: Sidebar menü yapılarında önerilir.

Senaryo Tamamlandığında

• Sol kenarda başlıklar (“Dashboard”, “Management”, “Connection”, “Customer”) görünür.
• Kullanıcı başlığa tıkladığında ilgili menü genişler.
• Accordion aktifse, diğer menüler otomatik olarak kapanır.
• Yönetim paneli, hem kullanıcı dostu hem de düzenli bir hale gelir.

Kısıtlamalar

• Collapse yalnızca web uygulamalarında çalışır.
• Çok fazla panel veya iç içe Collapse kullanımı performansı etkileyebilir.

İpuçları & Best Practices

• Sidebar menülerde Accordion özelliğini aktif kullanın.
• Başlıkları kısa, net ve kategorik seçin (“Management”, “Connection”, “Customer” gibi).
• Gereksiz açık paneller kullanıcı deneyimini azaltır → Collapse ile sadeleştirin.
• İkon ekleyerek (örneğin “>” veya “▼”) kullanıcıya açılır menü olduğunu belirtin.