Tabbar Menü Tasarımı

Bu öğrenme içeriğinde Mobil uygulama ekranlarında kullanacağımız ve ekranlar arasındaki geçişi sağlayacak Tabbar menü tasarımını hazırlayacağız.

Uygulamaya başlamadan önce, öğrenme içeriği sonunda tamamlayacağımız örnek Tabbar menü tasarımını inceleyelim.

Temel olarak element ağacını incelediğimizde, Footer elementinin içine eklenmiş Row elementini görüntülüyoruz. Row elementi 3 kolonlu yapıda kullanılmış. Kolonlara baktığımızda Vertical Stack elementi içine eklenmiş Icon ve Label elementlerini görüyoruz. Vertical Stack elementi, içine eklenmiş 2 ve daha fazla elementin dikey olarak ara boşluklarının ayarlanabildiği container tipinde bir elementtir. Icon elementi ile ikon kütüphanesinden ihtiyacın olan ikonu seçebilirsin. Bu Tabbar menü tasarımında ilk kolon için Dashboard’u temsil eden bir ikon kullanılmış ve ikon altında ekran ismi yazılmış. İkinci kolona baktığımızda aynı şekilde Liste ekranı temsil eden bir ikon kullanılmış ve liste ekranın ismi yazılmış. Son kolonda ise kullanıcı profilini temsil eden bir ikon kullanılarak Profil ekranının ismi yazılmış.

Şimdi benzer bir Tabbar Menü tasarımını birlikte hazırlayalım.

1. Yeni bir Mobile Compatible App oluşturun.
2. Açılan ekranda varsayılan olarak gelen Row’u kaldırın ve Elements panelinden Footer elementini sürükleyip bırakın. Footer elementini ekran kaydırıldığında menünün kenarda sabit kalmasını istediğimiz için kullanıyoruz.
3. Eklediğiniz Footer elementi içerisine bir Row elementini sürükleyip bırakın. Row elementini 3 kolonlu bir yapıda kullanarak devam edeceğiz.
4. Row elementi seçiliyken Styling paneli > Layout>Styles bölümünde yer alan Row hazır stilini kaldırın ve None hazır stilini ekleyin.
5. Ardından ilk kolon içerisine Vertical Stack elementi ekleyin.
6. Verticak Stack elementi içerisine sırasıyla bir Icon ve Label elementi sürükleyip bırakın.
7. Vertical Stack elementi seçiliyken Styling paneli > Layout>Alignment aracılığıyla Vertical Stack elementi içerisindeki elementleri yatayda ortalayın.
8. Vertical Stack’in ebeveyni olan Column seçiliyken Styling paneli> Layout > Alignment aracılığıyla Column içinde bulunan elementleri yatayda ortalayın.
9. Daha sonra ikon elementini seçin ve Properties panelinde bulunan ikon kütüphanesi aracılığıyla ikon seçimini yapın.
10. İkon seçiliyken Styling paneli > Layout>Padding bölümünden 4 yönde 8 piksellik padding verin.
11. Ardından Styling paneli > Text bölümünden ikonun rengini değiştirin.
12. Yine ikon elementi seçiliyken Styling paneli > Fill bölümünden ikonun arka plan rengini değiştirin.
13. Border alanından ikona 4 yönde 4 Px’lik Radius verin.
14. Ardından Label elementini seçin ve üzerine iki kez tıklayarak “Dashboard” ifadesini girin.
15. Label elementi seçiliyken Styling paneli > Text bölümünden Paragraph hazır stilini kaldırıp H6 hazır stilini ekleyin.
16. Yine Text bölümü aracılığıyla yazı rengini değiştirin.
17. Şimdi ilk kolonda yer alan Vertical Stack’i BreadCrumb aracılığıyla seçin.
18. Vertical Stack’i Duplicate edin.
19. Yeni gelen Vertical Stack’i sürükleyip ikinci kolona bırakın.
20. İkinci kolonda yer alan ikon elementini seçin ve Properties panelde yer alan ikon kütüphanesi aracılığıyla ikonu değiştirin.
21. Ardından Styling paneli > Text bölümünden ikonun rengini değiştirin.
22. Devamında Styling paneli > Fill bölümünden ikonun arka plan rengini değiştirin.
23. Daha sonra Label elementini seçin ve üzerine iki kez tıklayarak “Employee List” ifadesini girin.
24. Styling paneli > Text bölümünden yazının rengini değiştirin.
25. Az önce yaptığımız işlemlere benzer şekilde ikinci kolonda yer alan Vertical Stack’i BreadCrumb aracılığıyla seçin ve Duplicate edin.
26. Yeni gelen Vertical Stack’i sürükleyip üçüncü kolona bırakın.
27. Üçüncü kolonda yer alan ikon elementini seçin ve Properties panelde yer alan ikon kütüphanesi aracılığıyla ikonu değiştirin.
28. Styling paneli > Text bölümünden ikonun rengini, Styling paneli > Fill bölümünden ise ikonun arka plan rengini değiştirin.
29. Daha sonra Label elementini seçin ve üzerine iki kez tıklayarak “Profile” ifadesini girin.

İşte hazırsınız.