Kuika'nın Menu elementi, uygulamalarda kullanıcıların farklı sayfalara veya işlevlere kolayca erişebilmesi için navigasyon menüsü oluşturur. Menü, kullanıcıların farklı ekranlara geçişini sağlar ve çok seviyeli menüler oluşturmanıza imkan tanır. Bu eğitim içeriğinde, Menu elementini nasıl ekleyeceğinizi, yapılandıracağınızı ve çoklu dil desteği ekleyeceğinizi öğreneceksiniz.
Menu elementi hem web hem de mobil uygulamalarda kullanılabilir.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
Menu Elementi Ekleme
Menu Elementi Özellikleri
Çoklu Dil Desteği Sağlama
Element ayarları ve özelleştirme
Menu Elementini Ekleyin
Kuika platformuna giriş yapın.
Apps ekranından projenizi açın.
UI Design modülüne gidin.
Sol kenardaki Screens panelinde Master Screens yanındaki “+” simgesine tıklayarak bir Master Screen oluşturun.
Sol kenardaki Elements panelinden Navigation kategorisini seçin.
Menu elementini çalışma alanına sürükleyip bırakın. Menü elementini sol, üst veya sağ kenar alanlarına yerleştirebilirsiniz.
Properties panelinden Direction parametresini kullanarak menünün yönünü yatay (Horizontal) veya dikey (Vertical) olarak ayarlayın.
Left Menu: Menü, sol kenarda dikey olarak görüntülenir.
Header veya Footer: Menü, yatay şekilde görüntülenir.
Menu Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Select a Data Type: Menü verilerini Statik (Static) veya Dinamik (Dynamic) olarak yapılandırabilirsiniz.
Static: Menü öğelerini manuel olarak ekleyebilirsiniz. + Sub Menu ile alt menüler, + Menu Item ile tek seviyeli menü öğeleri ekleyebilirsiniz.
Dynamic: Menü öğeleri bir veri kaynağından alınır. Options alanından veri kaynağına ait özel aksiyonu seçebilirsiniz.
Direction: Menü öğelerinin yatay (Horizontal) veya dikey (Vertical) görüntülenmesini sağlar.
Theme: Menü temasını Light veya Dark olarak seçebilirsiniz.
Hamburger Control: Menü öğesini simge şeklinde (üç çizgili ikon) daraltarak, tıklanıldığında menünün açılmasını sağlayan kontrol unsurudur.
Menu Elementinde Çoklu Dil Desteği
Menü eklediğiniz uygulamayı açın.
Sol paneldeki Languages paneline gidin.
Languages başlığı yanındaki “+” simgesine tıklayın.
Açılan New Language penceresinde eklemek istediğiniz dili seçin ve isimlendirin.
CREATE butonuna tıklayarak işlemi tamamlayın.
Menu elementindeki metinler, eklediğiniz her dilde otomatik olarak çeviri penceresine eklenir. Çevirileri ekleyerek uygulamanızın çok dilli desteğini etkinleştirebilirsiniz.
Bu kılavuzu takip ederek Menu elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.
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
Menü Tipini Seçin: Menu elementi için veri tipi olarak Static seçin. Böylece menü yapısını manuel olarak oluşturabilirsiniz.
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.
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.
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)
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.
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.
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.
Elementlere Border Ekleme
Kuika platformuna giriş yapın ve Apps ekranından projenizi seçin.
UI Design modülüne tıklayın.
Elements panelinden bir element sürükleyip bırakın.
Elementi seçtikten sonra Styling panelini açın.
Border seçeneğini genişletin.
Styles alanındaki üç nokta ikonuna tıklayın.
Add New Style seçeneğini seçin ve yeni bir stil oluşturun.
Custom Style bölümünde, renk, kalınlık, köşe eğimi ve stil ayarlarını yapın.
CREATE butonuna tıklayarak işlemi tamamlayın.
Önemli Notlar
Bazı elementlerde tüm Border özellikleri kullanılabilirken, bazı elementlerde yalnızca belirli özellikler desteklenir.
Border özellikleri, elementin türüne ve kullanım amacına bağlı olarak değişebilir.
Bu adımları izleyerek uygulamanızda kenarlık ekleme ve özelleştirme işlemlerini hızlı ve verimli bir şekilde gerçekleştirebilirsiniz.
