Header Tasarımı

Bu öğrenme içeriğinde, bir uygulamanın ana sayfası olan Dashboard ve diğer ekranlarında yer alacak olan Header, yani üstbilgi bölümünün nasıl tasarlanacağını adım adım öğreneceğiz. 

Bu tasarım, Dashboard ekranı dahil olmak üzere, uygulamanın çeşitli ekranlarında kullanılacak. Eğitim sonunda elde edeceğimiz Header tasarımı, sağ tarafta bildirimler ekranına yönlendiren bir simge, kullanıcı resmi, kullanıcının adı ve unvanı bilgileri ile bir açılır menü içerecek.

Şimdi, bu Header tasarımını daha sonra üzerinde çalışacağımız Dashboard ekranı için adım adım hazırlayalım:

1. Screens paneli aracılığıyla HomePage ekranını açın.
2. Ekranda yer alan Row elementini silin.
3. Ekrana bir Header elementi ekleyin. [Header elementi tanımı bantta çıkmalı]
4. Header’ın arka plan rengini Background seçimiyle değiştirin.
5. Header içerisine bir Row sürükleyip bırakın ve tek kolona dönüştürün.
6. Kolonu seçin ve sağa hizalayın.
7. Kolon içerisine bir Horizontal Stack ekleyin ve Gap değerini 24 olarak ayarlayın. [Horizontal Stack elementi tanımı bantta çıkmalı]
8. Eklediğiniz Horizontal Stack’i dikeyde ortalayın.
9. Horizontal Stack içerisine bir Icon ekleyin ve ikon kütüphanesi aracılığıyla bir ikon seçin.
10. Horizontal Stack içerisine, Icon yanına, Content Menü ekleyin. [Content Menu elementi tanımı bantta çıkmalı]
11. Content Menü içerisine bir Horizontal Stack ekleyin ve Gap değerini 16 olarak ayarlayın.
12. Horizontal Stack seçiliyken dikeyde ortalayın. 

Şimdi kullanıcı görselinin yer alacağı Image elementi üzerine çalışalım.

13. Horizontal Stack içerisine bir Image elementi ekleyin ve geçici bir resim yükleyin.
14. Image elementi seçiliyken Properties üzerinden ImageFit’i Fill olarak değiştirin.
15. Ardından Styling paneli Layout alanında varsayılan gelen 100 değerini sıfırlayın ve Image32 hazır stilini ekleyin.
16. Yine Image elementi seçiliyken Border alanından Radius hazır stilini ekleyin.

Giriş yapmış kullanıcının görselinin yer alacağı Image elementi üzerine çalıştıktan sonra şimdi isim ve unvan bilgisinin yer alacağı alanları hazırlayalım.

17. Horizontal Stack içerisine, Image elementi yanına, bir Vertical Stack elementi ekleyin ve Gap değerini 1 olarak ayarlayın.
18. Vertical Stack elementini sola hizalayın.
19. Ardından Vertical Stack içerisine bir Label elementi ekleyin.
20. Label elementine geçici bir isim ekleyin.
21. Text alanından H3 hazır stilini ekleyin.
22. Devamında Label'i Duplicate edin.
23. Duplicate ettiğiniz Label’a geçici bir unvan girin.
24. Text alanında var olan hazır stilleri kaldırın ve H6 hazır stilini ekleyin.
25. Ardından Vertical Stack yanına bir ikon elementi ekleyin ve ikon seçin.
26. Şimdi BreadCrumb aracılığıyla ContentMenu’yü seçin ve Properties panelini açın.
27. İki tane ContentMenu öğesi kalacak şekilde diğer öğeleri silin.
28. İlk öğeyi Profile, ikinci öğeyi Logout olacak şekilde isimlendirin.
29. Logout öğesi seçiliyken, Styling paneli, Text alanından metin rengini değiştirin.

Böylelikle Header tasarımımız hazır.