Alt Menülerin Açılıp Kapanması ve Kolon Gibi Dizilmesi

Kuika Menu elementi, Sub Menu özelliği sayesinde çok seviyeli (multi-level) menü yapılarının oluşturulmasına olanak tanır. Bu sayede kullanıcılar, bir ana menü başlığına tıklayarak alt menü seçeneklerini görüntüleyebilir veya gizleyebilir. Bu yapı hem kullanıcının uygulama içinde daha kolay gezinmesini sağlar hem de karmaşık menüleri sade bir düzene oturtur.

Sub Menu Yapısı Kurma

  1. Menü Tipini Seçin: Menu elementi için veri tipi olarak Static seçin. Böylece menü yapısını manuel olarak oluşturabilirsiniz.
  2. Sub Menu Ekleyin: Properties panelinde, + Sub Menu butonuna tıklayarak bir ana menü başlığı ekleyin. Bu öğe, alt menülerin bağlı olacağı başlık görevini görür.
  3. Alt Menü Öğeleri Ekleyin: Eklediğiniz Sub Menu’nün altında yer alan + Menu Item butonuna tıklayarak bir veya birden fazla alt menü öğesi oluşturabilirsiniz. Her Menu Item, kullanıcıyı farklı bir ekran ya da işlem sayfasına yönlendirebilir.
  4. Otomatik Geçiş Davranışı: Menü başlıklarına tıklanıldığında alt menülerin açılması, tekrar tıklanıldığında kapanması Kuika platformu tarafından otomatik olarak sağlanır. Bu geçiş için ek bir yapılandırmaya gerek yoktur.

Dikey Dizilim (Alt Alta Kolon Gibi Görüntüleme)

  1. Menü Yönünü Ayarlayın: Menu elementinin Direction parametresini Vertical olarak ayarlayın. Bu sayede hem ana menü başlıkları hem de alt menü öğeleri dikey hiyerarşiyle alt alta yerleştirilir.
  2. Kolon Yapısı: Alt menü öğeleri, bağlı oldukları başlığın hemen altında kolon görünümünde listelenir. Bu yapı, özellikle sol kenar menülerde kullanıldığında kullanıcıya klasör benzeri bir navigasyon deneyimi sunar.
  3. Responsive Uyum: Menü yapısı ekran genişliğine göre uyumlu (responsive) şekilde çalışır. Mobil cihazlarda alt menüler daraltılabilir yapıda gösterilirken, geniş ekranlarda açık ya da sabit halde sunulabilir.

Menü Daraltma (Collapse) ve Genişletme

  • Menü elementinde Collapsed özelliği aktifleştirildiğinde, menü daraltılmış görünümde yalnızca ikonlar ya da öğelerin baş harflerini gösterir.
  • Kullanıcı daraltılmış menüde bir ikona tıkladığında menü genişleyerek alt menüleri görünür hale getirir.

Kullanım Senaryosu Örneği

Örneğin:

  • “Ürünler” adında bir Sub Menu oluşturabilirsiniz.
  • Bu başlık altına + Menu Item ile “Yeni Ürün Ekle”, “Ürün Listesi”, “Kategoriler” gibi alt başlıklar eklenebilir.
  • Kullanıcı “Ürünler”e tıkladığında bu alt başlıklar kolon şeklinde açılır. Başka bir başlığa geçildiğinde (örn. “Siparişler”), istenirse “Ürünler” alt başlıkları kapanacak şekilde davranış tanımlanabilir.