Content Menu elementi, kullanıcıların uygulama içindeki belirli içeriklere veya işlemlere hızlıca erişmesini sağlayan bir navigasyon elementidir. Genellikle sayfa içi yönlendirme, aksiyon tetikleme veya sık kullanılan işlemleri tek bir alanda toplamak amacıyla kullanılır. Content Menu, kullanıcı deneyimini sadeleştirerek uygulama içindeki dolaşımı daha sezgisel hale getirir.
Content Menu elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Sayfa içi bölümlere hızlı geçiş sağlama
Sık kullanılan aksiyonların tek menü altında toplanması
Detay ekranlarında ilgili alt içeriklere yönlendirme
Rapor veya dokümantasyon sayfalarında başlık bazlı gezinme
Ayar veya yönetim ekranlarında kategorilere ayrılmış içerik sunma
Uzun sayfalarda kullanıcıyı doğru içeriğe yönlendirme
2. Temel Özellikler
Menü öğelerini liste halinde düzenleme
Menü başlıklarını ve içeriklerini özelleştirme
Dinamik veya statik içeriklerle çalışabilme
Görünürlük ve yetkilendirme kurallarıyla uyumlu yapı
Sayfa içi navigasyon ve aksiyon tetikleme desteği
2.1. Content Menu Elementi Özellikleri
Content Menu elementinin ayarları, sağ tarafta yer alan Properties paneli üzerinden yapılandırılır. Aşağıda bu elemente ait temel özellikler açıklanmıştır:
Label: Content Menu üzerinde kullanıcıya gösterilen metni belirler.
Statik bir metin girilebilir.
Symbol Picker kullanılarak dinamik değerler (aksiyon sonucu, değişken, tablo alanı vb.) bağlanabilir.
Menu Opening Type: Menü içeriğinin hangi kullanıcı etkileşimiyle açılacağını belirler. Kullanılabilir seçenekler:
Click: Kullanıcı menüye tıkladığında içerik açılır. Daha kontrollü ve mobil uyumlu bir kullanım sunar.
Hover: Kullanıcı menü üzerine geldiğinde içerik otomatik olarak açılır. Masaüstü uygulamalarda hızlı erişim için uygundur.
2.2. Content Menu Elementine Eklenebilen Aksiyonlar
Content Menu elementi, navigasyon ve içerik gösterimine odaklanan pasif bir UI elementi olduğu için doğrudan aksiyon eklenmesini desteklemez. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Content Menu üzerine özel bir tetikleyici tanımlanamaz.
Aşağıdaki noktalar Content Menu’nün aksiyon yapısını açıklar:
Content Menu elementi üzerinde OnClick, OnChange veya benzeri bir event bulunmaz.
Menü açılma davranışı (Click / Hover) yalnızca görsel ve etkileşimsel bir ayardır, aksiyon tetikleyici değildir.
Content Menu, kullanıcıya seçenekleri sunar; işlemler menü içerisindeki diğer elementler (Button, Menu Item, Link vb.) üzerinden yürütülür.
Menü içindeki öğelere eklenen Button veya benzeri elementler aracılığıyla yönlendirme, veri işlemleri veya aksiyon çağrıları yapılabilir.
Content Menu’nün kendisi yalnızca kapsayıcı ve düzenleyici bir rol üstlenir, işlem başlatmaz.
3. Content Menu Elementi Nasıl Kullanılır?
Bu bölümde Content Menu elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Profil Bilgileri Menüsü Oluşturma
Bir uygulamada kullanıcıların hesaplarına ait işlemlere hızlı ve düzenli bir şekilde erişebilmesi için Content Menu yapısı kullanılır. Bu senaryoda, kullanıcının profil bilgileri ile hesap işlemlerini tek bir açılır menü altında sunan bir profil menüsü oluşturulmaktadır.
Senaryoda:
Uygulamanın üst bölümünde, kullanıcının profil ikonu, ad bilgisi ve rolü (ör. Designer) birlikte görüntülenir.
Kullanıcı profil alanına tıkladığında, ilgili bileşene bağlı Content Menu açılır.
Açılan Content Menu içerisinde Hesabım ve Çıkış Yap gibi hesap işlemlerine ait menü seçenekleri listelenir.
Kullanıcı Hesabım seçeneği ile profil veya hesap ayarları sayfasına yönlendirilir.
Çıkış Yap seçeneği seçildiğinde ise kullanıcı güvenli bir şekilde oturumdan çıkarılır.
Adım 1 - Gerekli Aksiyonun Tanımlanması
Arayüzde verileri göstermek için:
Örnek bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Sağlayan Aksiyon (GetMenuProfileData):
SELECT 'Demo User' AS Name, 'Designer' AS Role, 'https://www.gravatar.com/avatar/?d=mp&s=200
' AS ImageUrl
Adım 2 - Initial Action Ekleme
Başlangıçta anasayfada:
Element içerisinde örnek verilerin gösterimi için Add Action > Initial Action > Custom > Managed DB > GetMenuProfileData aksiyonunu ekleyin.
Adım 3 - Content Menu Elementini Ekleme ve Stil Düzenleme
Başlangıçta anasayfada:
UI Design modülünü açın.
Sol yan panelden Elements > Navigation > ContentMenu elementini sayfaya sürükleyip bırakın.
Content Menu elementi hizasında yanındaki boşluğa tıklayın.
Col > Styling > Sağa ve Ortaya hizala olarak ayarlayın.
İlk seçenek adı için ContentMenu > Properties > Menu Item > Label > “Hesabım” şeklinde güncelleyin.
İkinci Menu item seçeneğine tıklayın ve Label > “Çıkış Yap” olarak güncelleyin.
Çıkış Yap seçiliyken ContentMenuItem > Styling > Text > Kırmızı olarak ayarlayın.
İlk iki harici kalan Menu item’ları sol yanlarında bulunan silme ikonuna tıklayıp silin.
Hesabım Menu item’a tıklayın ve ContentMenuItem > Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin.
Navigate edilecek sayfayı sol yan panelde Screens > New Screen alanından “ContentMenuAccount” adında sayfayı oluşturun.
Navigate aksiyonunda parametreleri To Screen > ContentMenuAccount ve Open As > Current Page olarak ayarlayın.
Çıkış Yap Menu Item’a tıklayın ve ContentMenuItem > Add Action > onClick > Authorization > Logout sistem aksiyonunu ekleyin.
Adım 4 - Content Menu İçerisine Element Ekleme ve Yapılandırma
Content Menu içersine Elements > Container > Horizontal Stack elementini sürükleyip bırakın.
Horizontal elementi içeriklerini ortalamak için HorizontalStack > Styling > Layout > Align > Dikeyde Ortala olarak ayarlayın.
Icon içerisine isteğe bağlı olarak tıklandığında tekrar Content Menu içerisine yönlendirmesi için Icon > Add Action > UIControl > Set Focus To aksiyonunu ekleyebilirsiniz.
Set Focus To aksiyonuna Select Component > ContentMenu1 tanımlamasını yapın.
Preview
Kullanıcı, Content Menü alanının üzerine geldiğinde (hover), menü ek bir aksiyon gerektirmeden otomatik olarak görünür. Menü içerisinde Hesabım ve Çıkış Yap gibi kullanıcıya ait işlemler düzenli ve erişilebilir bir yapıda listelenir.
Uygulama test edildiğinde, kullanıcı profil alanında yer alan arrow ikonuna tıklandığında Content Menü açılır. Menü açıldığında, aktif alan mavi çerçeve ile focus durumunda gösterilerek kullanıcının etkileşimde olduğu alan net bir şekilde vurgulanır.
Bu yapı sayesinde kullanıcı, profil işlemlerine hızlıca erişebilir; focus ve hover geri bildirimleri ile etkileşimli ve kullanıcı dostu bir deneyim sunulur.
4. Ortak Özellikler (Properties)
Content Menu 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:
