Header
Header elementinin işlevine göz atın.
Header, uygulamanın kullanıcı arayüzünün üst kısmında bulunan temel navigasyon, menü, sayfa/ekran adı, bildirimler gibi arayüz elementleri içinde barındırma işlevine sahip Container tipinde bir elementtir. Header, uygulamanın genel tasarımında ve işlevselliğinde önemli bir rol oynar. Ekranın üst kenarında sabit kalmasını istediğiniz elementleri Header yapısında kullanabilirsiniz.
Header elementi web ve mobil uygulamaların geliştirilmesi sırasında genellikle web sayfalarının üst kısmında yer alan label, logo, menü ve benzeri kullanıcı arayüzü elementleri içermek için kullanılır.
Header elementini geliştireceğiniz web veya mobil uygulamalar da kullanabilirsiniz.
Header Ekleme
Header elementini uygulamanız içerisine eklemeniz oldukça kolay. Header elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir:
Header elementini ekrana sürükleyin ve bırakın.
Header elementini Properties paneli içerisinden özelleştirebilirsiniz.
Header elementini ekranda boş bir alana sürükleseniz de ekranın üst kenarına sabitlenerek kalacaktır. Uzun ekran tasarımlarında da yine ekran kaydırıldığında da yine üst kenara sabit kalacaktır.
Header elementi bir ekran içerisinde sadece bir kere kullanılabilir.
Geliştirdiğiniz ekranın menü, ekran adı, bildirimler, kullanıcı profili gibi elemanları barındıracağı için Header elementi içine öncelikle bir Row elementi ekleyerek başlayın. Ancak bir Column içine sürükleyebilecek birçok elementi ekleyebilirsiniz. Temel anlamda Header elementi içine çoğunlukla sürüklenerek bırakılan elementler;
Header elementi seçildiğinde, Properties panelinde Authorization (Yetkilendirme) ve Visibility (Görünürlük) parametreleri görüntülenir. Bu parametre alanları, Header elementi ile ilgili özel yetkilendirme ayarlarını ve görünürlük tercihlerini düzenlemenizi sağlar.
Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.
Header elementi için yetkilendirme seçeneklerini kullanabilirsiniz.
Elementlerde Authorization ekleme işlemlerini detaylı incelemek için tıklayın.
Kullanıcı rollerine göre veya ekran rollerine göre Authorization işlemlerini detaylı incelemek için tıklayın.
Elementler de visibility yani görünürlük, belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar. Bu özellik genellikle uygulama tasarımında veya işlevselliğinde kullanılır.
Header elementi için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini visibility seçeneklerini kullanabilirsiniz.
Elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Styling paneli içerisinden Header elementinin Layout (Düzen), Border (Kenarlık), Fill (Dolgu) veya Shadow (Gölge) düzenlemelerini yapabilirsiniz. Bu özellikler doğrultusunda Header elementinin stilini özelleştirebilirsiniz.
Header elementinde Layout ile çevresel iç boşluklar (Padding) ve boyutlandırma (Size) gibi görsel düzenlemeleri yapabilirsiniz.
Elementlerde Layout ayarları ile ilgili detaylı bilgi edinmek için tıklayın.
Header elementi içerisinde metinsel düzenleme yapılmamaktadır. Metinsel düzenlemenin yapılabilmesi için Header elementi içerisine farklı elementler (label..) eklenmelidir.
Elementlerde Text ayarları ile ilgili detaylı bilgi edinmek için tıklayın.
Header elementinin arka planına (background) renk veya görseli Fill ile ekleyebilirsiniz.
Elementlerde Fill (Dolgu) ile ilgili detaylı bilgi edinmek için tıklayın.
Header'in dış kenarlarına kenarlık (Border) ekleyebilir, köşe eğimleri (Radius) verebilirsiniz.
Elementlere Border (Kenarlık) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Web uygulamalar içerisinde Header elementine Shadow (Gölge) ile gölge efekti ekleyebilirsiniz. Mobil uygulamalarda Shadow (Gölge) kullanılmamaktadır.
Elementlere Shadow (Gölge) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.
Last updated
