Kuika’nın Collapse elementi, içerikleri daha düzenli ve kompakt bir yapıda sunmanıza olanak tanıyan etkileşimli bir arayüz elementidir. Kullanıcılar, başlık alanına tıklayarak içerikleri genişletip daraltabilir, böylece sayfa üzerinde gereksiz kalabalık oluşmasını engeller. Özellikle uzun açıklamalar, çok adımlı süreçler, teknik bilgiler veya sıkça sorulan sorular (SSS) gibi içeriklerin yalnızca ihtiyaç duyulduğunda görünmesini sağlamak için kullanılabilir.
Collapse elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Sıkça Sorulan Sorular (SSS) alanları: Kullanıcıların yalnızca merak ettikleri sorunun cevabını açarak görüntülemesini sağlar. Bu sayede uzun metinler sayfa üzerinde dağınık görünmez.
Uzun açıklama ve bilgilendirme metinleri: Teknik açıklamalar, kullanım detayları veya yasal metinler gibi uzun içerikler varsayılan olarak kapalı tutulabilir.
Form açıklamaları ve yardım metinleri: Form alanlarıyla ilgili ek açıklamalar veya ipuçları, kullanıcı talep ettiğinde görüntülenebilir.
Adım adım süreç anlatımları: Kurulum adımları, başvuru süreçleri veya iş akışları her adım için ayrı Collapse alanları altında sunulabilir.
Ayar ve konfigürasyon ekranları: Gelişmiş veya nadiren kullanılan ayarlar Collapse içinde gizlenerek arayüz sadeleştirilebilir.
Eğitim ve dokümantasyon sayfaları: Konu başlıkları altında detay içeriklerin açılıp kapanması, öğrenme sürecini daha yönetilebilir hale getirir.
2. Temel Özellikler
Açılır–kapanır içerik yapısı: Collapse elementi, başlık alanına tıklanarak içeriğin genişletilip daraltılmasını sağlar. Bu yapı sayesinde sayfa üzerinde yalnızca gerekli bilgiler gösterilir.
Alan tasarrufu sağlayan tasarım: Uzun metinler veya detaylı içerikler varsayılan olarak kapalı tutulabilir. Böylece arayüz daha sade ve okunabilir kalır.
Başlık bazlı içerik organizasyonu: Her Collapse alanı bir başlık altında yapılandırılır. Kullanıcı, ilgilendiği başlığa tıklayarak yalnızca o içeriği görüntüler.
Birden fazla Collapse alanı ile çalışma: Aynı ekran üzerinde birden fazla Collapse elementi kullanılabilir. Bu sayede içerikler kategorilere veya konu başlıklarına ayrılabilir.
İç içe element desteği: Collapse içeriği içerisinde Text, Label, Image, Button, Form elemanları gibi birçok UI elementi kullanılabilir.
2.1. Collapse Elementi Özellikleri
Collapse elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Collapse: Bu bölümden yeni Collapse panelleri ekleyebilir, var olanları silebilir, sıralamalarını değiştirebilir ve mevcut panelleri seçebilirsiniz.
Destroy Inactive Panel: Kullanıcının yalnızca bir paneli açık tutmasına izin verir. Bir panel açıldığında, diğer açık paneller otomatik olarak kapanır.
Accordion: Bir panel açıldığında, diğer açık panellerin otomatik olarak daraltılmasını sağlar. Bu özellik, içeriklerin daha düzenli görünmesine yardımcı olur.
Collapse elementi, kullanıcıların yalnızca ihtiyaç duydukları bilgileri görmelerini sağlar ve arayüzde gereksiz kalabalığı önler.
Collapse elementi, panel durumları değiştiğinde aksiyon tetiklenmesine olanak tanır. Bu kapsamda onChange olayı desteklenmektedir.
onChange, kullanıcı bir Collapse panelini açtığında veya kapattığında tetiklenir. Bu tetikleyici sayesinde panel durumuna bağlı işlemler otomatik olarak gerçekleştirilebilir.
onChange tetikleyicisinin kullanım senaryoları şunlardır:
Kullanıcı bir paneli açtığında ilgili içeriğe ait verilerin yüklenmesi
Panel durumuna göre başka UI elementlerinin (Label, Button, Form vb.) görünürlüğünün değiştirilmesi
Açılan panele göre liste, tablo veya grafik verilerinin filtrelenmesi
Panel değişimlerine bağlı olarak analitik veya log aksiyonlarının çalıştırılması
Bir panel açıldığında farklı bir panelin veya elementin otomatik olarak güncellenmesi
Collapse elementi seçildiğinde, Properties paneli → ADD ACTION → onChange adımı izlenerek istenen aksiyonlar bağlanabilir. onChange olayı, Collapse içeriğinin kendisini değil, panelin açılma / kapanma durumunu baz alarak çalışır.
3. Collapse Elementi Nasıl Kullanılır?
Bu bölümde Collapse elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Master Screen Collapse Menü Yapısı (Yan Menü)
Bir iş yönetimi veya kurumsal uygulamada, kullanıcıların uygulama içerisindeki ana ve alt ekranlara düzenli ve sade bir yapı üzerinden erişebilmesi için Master Screen üzerinde konumlandırılmış Collapse destekli yan menü (sidebar) yapısı kullanılır. Bu yapı, menü kalabalığını azaltırken kullanıcıya ihtiyaç duyduğu alanlara hızlı erişim imkanı sunar.
Senaryoda:
Uygulamanın sol bölümünde sabit bir yan menü bulunur. Dashboard Label’ı üzerinden Home Page ekranına erişim sağlanır.
Management, Connection ve Customer başlıkları, alt sayfaları gruplayan Collapse menüler olarak yapılandırılmıştır ve yalnızca kullanıcı etkileşimi ile açılıp kapanır.
Kullanıcı bir alt menü öğesini seçtiğinde ilgili ekran ana içerik alanında açılır ve sade, kontrollü bir gezinme deneyimi sunulur.
Adım 1 - Master Screen Oluşturma ve Element Ekleme
Sol yan paneldeki Screens alanında bulunan Master Screen bölümünden yeni Master Screen ekleyin.
Ekranda Properties alanından Layout Configuration içerisinde sol yan haricindeki tüm alanları kapatın.
Sol yan alana Elements > Container > Row elementini sürükleyip bırakın ve Row > Properties alanından tek sütun olarak ayarlayın.
Col içerisine Elements > Container > VerticalStack elementini ekleyin.
Vertical Stack içerisine Elements > Display > Label elementini ekleyin.
Yazıyı Label > Properties > Value > “Dashboard” olarak güncelleyin.
Label elementi stilini Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
Label elementi altına vertical stack içerisine Elements > Interactive > Collapse elementini sürükleyip bırakın.
Collapse içerisindeki menüleri Collapse > Properties > +CollapsePanel seçeneğine tıklayıp bir yeni menü daha oluşturun.
Collapse yazısına tıklayın bir çok menünün açılabilmesi için Accordion > Kapalı olarak ayarlayın.
İlk CollapsePanel içeriğine tıklayın ve Header > “Management“ olarak ayarlayın.
CollapsePanel içerisine Elements > Container > VerticalStack ekleyin.
Vertical Stack içerisine iki yeni Elements > Display > Label elementini ekleyin.
Sırasıyla Label değerlerini Label > Properties > Value alanından “Document” ve “Project” olarak güncelleyin.
Labelların yer aldığı Vertical Stack elementini seçin ve üçüncü seçenek olan kopyala ya basın.
Diğer Title of the Panel içerisine tıklayın ve CollapsePanel içerisine tıklayıp dördüncü seçenek olan yapıştıra basın.
Collapse elementi seçiliyken Properties alanından ikinci CollapsePanel’e tıklayın ve Header > Connection olarak güncelleyin.
İçerisindeki Label > Properties > Value alanlarını sırasıyla “Email Integration” ve “Marketing” olarak güncelleyin.
Son menü adını üçüncü CollapsePanel > Header > Customer olarak güncelleyin.
Boş durumunu gözlemlemek için ilgili alanı boş bırakabilirsiniz.
İlgili sayfalara yönlendirme yapabilmek için sayfa adının yazdığı Label’a tıklayın örneğin Document. Daha sonra Document Label’ına Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin.
Benzer şekilde Dashboard Label’ı içinde ana sayfaya Navigate aksiyonu ekleyebilirsiniz.
Kalan sayfalara da benzer şekilde navigate aksiyonunu tanımlayın.
Adım 2 - Sayfaları Oluşturma
UI Design modülünü açın:
Sol yan panelde Screens bölümünden “Document”, “Project“ “Email Integration” ve “Marketing” adında yeni sayfalar oluşturun.
Örneğin, Document için CollapseMasterScreen seçili sayfayı aşağıdaki şekilde oluşturabilirsiniz.
Kalan “Project“ “Email Integration” ve “Marketing” sayfalarında Role tanımlaması yapmanıza gerek yoktur. Adım 1.2.’ ye benzer şekilde sayfaları oluşturmanız yeterlidir.
Preview
Uygulama test edildiğinde, sol tarafta sabit olarak konumlandırılmış Dashboard yan menüsü üzerinden ekranlar arasında kolayca geçiş yapılabildiği görülür. Management, Connection ve Customer başlıkları Collapse yapısıyla düzenlenmiş olup, kullanıcı yalnızca ihtiyaç duyduğu menüleri açarak Document ve Project gibi alt sayfalara hızlıca erişebilir. Bu yapı, uygulama içinde sade, kontrollü ve anlaşılır bir navigasyon deneyimi sunar.
4. Ortak Özellikler (Properties)
Collapse elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Accordion yapısını kullanarak aynı anda yalnızca bir panelin açık kalmasını sağlayın. Bu yaklaşım, kullanıcıların odağını tek bir içerikte tutar ve bilgi karmaşasını azaltır.
onChange tetikleyicisini yalnızca gerekli senaryolarda kullanın. Her panel açılışında ağır aksiyonlar (SQL, API çağrıları vb.) çalıştırmak performans sorunlarına yol açabilir.
Panel başlıklarını kısa, net ve aksiyon odaklı tutun. Kullanıcı paneli açmadan önce içeriği ne göreceğini anlayabilmelidir.
İç içe (nested) Collapse kullanımlarında panel hiyerarşisini sade tutun. Çok katmanlı yapılar kullanıcı deneyimini olumsuz etkileyebilir.
6. Kısıtlamalar
Collapse elementi yalnızca web uygulamalarında desteklenmektedir. Mobil uygulamalarda kullanım desteği bulunmamaktadır.
Collapse panelleri doğrudan bir veri kaynağına bağlanmaz. İçerik, panel içine eklenen diğer UI elementleri üzerinden yönetilir.
onChange tetikleyicisi yalnızca panelin açılma veya kapanma durumunda çalışır; panel içindeki elementlerin etkileşimlerini kapsamaz.
Çok fazla panelin aynı anda açık tutulması, özellikle uzun içeriklerde sayfa performansını düşürebilir. Bu nedenle Accordion veya Destroy Inactive Panel seçenekleri önerilir.
