Bu öğrenme içeriğinde Dashboard ekranında ve diğer ekranlarda da kullanacağımız üstbilgi bölümünün tasarımını hazırlayacağız. Header tasarımında, sol kenarda bir hamburger menu ve ekranın adı bulunuyor. Sağ kenarda ise kullanıcı profili ve menüsünü görüntülüyoruz. Bir web projesinde, sayfa yukarı doğru kaydırdığında, üstbilgi bölümü, browser'da görüntülenen alanın dışında kalacaktır. Sayfa kaydırıldığında bu alanın üst kenarda sabit kalmasını istiyorsanız Header elementini kullanarak hazırlamalısınız.
Bu öğrenme içeriğinde Dashboard ekranında ve diğer ekranlarda da kullanacağımız üstbilgi bölümünün tasarımını hazırlayacağız.
Uygulamaya başlamadan önce, öğrenme içeriği sonunda tamamlayacağımız örnek Header bölümünü inceleyelim.
Sol kenarda bir hamburger menu ve ekranın adı bulunuyor. Sağ kenarda ise kullanıcı profili ve menüsünü görüntülüyoruz. Bir web projesinde, sayfa yukarı doğru kaydırdığında, üstbilgi bölümü, browserda görüntülenen alanın dışında kalacaktır. Sayfa kaydırıldığında bu alanın üst kenarda sabit kalmasını istiyorsanız Header elementini kullanarak hazırlamalısınız.
Temel olarak element ağacını incelediğimizde, Header elementinin içine eklenmiş Row elementini görüntülüyoruz. Row elementi temelde 24 farklı kolona bölünebilir. Burada ise 2 kolonlu yapı kullanılmış. Sol kenardaki menü ikonu ve ekran adı bölümüne baktığımızda Horizontal Stack elementi içine eklenmiş Icon ve Label elementlerini görüyoruz. Horizontal Stack elementi, içine eklenmiş 2 ve daha fazla elementin ara boşluklarının ayarlanabildiği container tipinde bir elementtir. Icon elementi ile ikon kütüphanesinden ihtiyacın olan ikonu seçebilirsin. Sağ kenarda ise profil menüsünü oluşturabilmek için ilk olarak Content menüyü ve içine eklenmiş image elementini görüntülüyoruz.
Şimdi benzer bir Header bölümünü yeni bir sayfa üzerinde hazırlayalım.
Sol kenarda Screens paneli ile New Screen Pop-up’ını aç. Blank screen tipini seçin ve Dashboard adını girerek ekranı oluşturun.
Sol kenarda Elements paneli ile Header elementini ekran üzerine doğru sürükle bırak ile ekleyin.
Şimdi bu Header elementini 2 bölüme ayırabilmek için içine bir Row elementi ekleyelim. Row elementi varsayılan olarak 3 kolon olarak gelir. Elementi eklendikten sonra sağ kenardaki Properties panelinden 2 kolona dönüştürün. Bu kolon yapısının tablet ve telefon ekran genişliklerinde nasıl davranacağını da ayrıca ayarlayabiliriz.
Row içindeki sol kolona Horizontal Stack elementini ekleyin. Bu element içine bir ikon elementi ekleyin. Icon elementi seçili iken sağ kenarda Properties paneli üzerinden ikon kütüphanesinden Menu ikonunu seçin.
Icon elementi font yani yazı tipi temelli bir elementtir. Bu nedenle boyut, renk gibi değişiklikleri Styling panelindeki Text bölümü ile yapabilirsiniz.
Ekran adını gösterecek olan Label elementi ikonun sağına gelecek şekilde ekleyin. Properties panelindeki value alanından yazıyı Dashboard olarak değiştirin. Styling paneli > Text bölümünden H3 yazı stilini seçerek görsel düzenlemeyi tamamlayalım.
Sol kenara eklenen 2 elementin arasındaki boşluğu ayarlayabilmek için Horizontal Stack elementini seçin. Properties panelinde bulunan Gap parametresi ile eklenmiş elementlerin aralarındaki boşluğu ayarlayın. Bu alana 16px değerini girin.
Şimdi sağ kenardaki profil menüsünü oluşturabilmek için ilk olarak Trigger başlığı altındaki Content Menu elementini sürükle bırak ile ekleyin.
Daha sonra Content Menu içine Image elementini ekleyin. Image elementi seçili iken Properties>imageFit>fill seçimini yap. ImageFit’i fill yaparak yüklenen görselin Image elementinin ölçüsüne uygun bir şekilde ortalanarak sığdırılmasını sağlamış olursunuz.
Image elementi seçiliyken Styling>Layout>Size aracılığıyla genişlik ve yükseklik değerini 32px olarak girin.
Styling>Border>Radius bölümünden Image elementinin dört köşesine 32px’lik Radius değeri vererek görselin yuvarlak bir çerçeve içinde gösterilmesini sağlayın.
Image elementinin görsel ayarını yaptıktan sonra Properties>Value>Uploaded Images aracılığıyla bir avatar görseli ekleyin.
Avatar görseli eklerken Kuika yapay zeka asistanını kullanarak yeni bir görsel oluşturup, kullanabilirsiniz.
Image elementi ile ilgili çalışmaları tamamladıktan sonra ContentMenu’nün içeriklerini düzenleyelim.
İlk olarak ContentMenu seçiliyken Properties>ContentMenu aracılığıyla tek bir menü öğesi kalacak şekilde diğer menü öğelerini silin.
Menü öğesini seçin ve altta açılan Label>Fixed Value aracılığıyla Logout olarak isimlendirin.
Menü öğesi seçiliyken bir stil tanımlayabilmek için Styling>Text>Styles aracılığıyla Button_Secondary stilini seçin. Bir renk vermek için de Color alanından kırmızı rengi seçelim.
Son olarak ContentMenu’nün bulunduğu kolonu seçin ve Styling paneli Layout bölümünden sağa yaslayın.
Header tasarımını hazırladık. Benzer bir çalışma süreciyle ihtiyacın olan üstbilgi alanlarını sen de kolaylıkla hazırlayabilirsin.
Bir sonraki öğrenme içeriğinde Dashboard ekran tasarımını birlikte hazırlayacağız.
Bu öğrenme içeriğinde Dashboard ekranında ve diğer ekranlarda da kullanacağımız üstbilgi bölümünün tasarımını hazırlayacağız. Header tasarımında, sol kenarda bir hamburger menu ve ekranın adı bulunuyor. Sağ kenarda ise kullanıcı profili ve menüsünü görüntülüyoruz. Bir web projesinde, sayfa yukarı doğru kaydırdığında, üstbilgi bölümü, browser'da görüntülenen alanın dışında kalacaktır. Sayfa kaydırıldığında bu alanın üst kenarda sabit kalmasını istiyorsanız Header elementini kullanarak hazırlamalısınız.
Bu öğrenme içeriğinde Dashboard ekranında ve diğer ekranlarda da kullanacağımız üstbilgi bölümünün tasarımını hazırlayacağız.
Uygulamaya başlamadan önce, öğrenme içeriği sonunda tamamlayacağımız örnek Header bölümünü inceleyelim.
Sol kenarda bir hamburger menu ve ekranın adı bulunuyor. Sağ kenarda ise kullanıcı profili ve menüsünü görüntülüyoruz. Bir web projesinde, sayfa yukarı doğru kaydırdığında, üstbilgi bölümü, browserda görüntülenen alanın dışında kalacaktır. Sayfa kaydırıldığında bu alanın üst kenarda sabit kalmasını istiyorsanız Header elementini kullanarak hazırlamalısınız.
Temel olarak element ağacını incelediğimizde, Header elementinin içine eklenmiş Row elementini görüntülüyoruz. Row elementi temelde 24 farklı kolona bölünebilir. Burada ise 2 kolonlu yapı kullanılmış. Sol kenardaki menü ikonu ve ekran adı bölümüne baktığımızda Horizontal Stack elementi içine eklenmiş Icon ve Label elementlerini görüyoruz. Horizontal Stack elementi, içine eklenmiş 2 ve daha fazla elementin ara boşluklarının ayarlanabildiği container tipinde bir elementtir. Icon elementi ile ikon kütüphanesinden ihtiyacın olan ikonu seçebilirsin. Sağ kenarda ise profil menüsünü oluşturabilmek için ilk olarak Content menüyü ve içine eklenmiş image elementini görüntülüyoruz.
Şimdi benzer bir Header bölümünü yeni bir sayfa üzerinde hazırlayalım.
Sol kenarda Screens paneli ile New Screen Pop-up’ını aç. Blank screen tipini seçin ve Dashboard adını girerek ekranı oluşturun.
Sol kenarda Elements paneli ile Header elementini ekran üzerine doğru sürükle bırak ile ekleyin.
Şimdi bu Header elementini 2 bölüme ayırabilmek için içine bir Row elementi ekleyelim. Row elementi varsayılan olarak 3 kolon olarak gelir. Elementi eklendikten sonra sağ kenardaki Properties panelinden 2 kolona dönüştürün. Bu kolon yapısının tablet ve telefon ekran genişliklerinde nasıl davranacağını da ayrıca ayarlayabiliriz.
Row içindeki sol kolona Horizontal Stack elementini ekleyin. Bu element içine bir ikon elementi ekleyin. Icon elementi seçili iken sağ kenarda Properties paneli üzerinden ikon kütüphanesinden Menu ikonunu seçin.
Icon elementi font yani yazı tipi temelli bir elementtir. Bu nedenle boyut, renk gibi değişiklikleri Styling panelindeki Text bölümü ile yapabilirsiniz.
Ekran adını gösterecek olan Label elementi ikonun sağına gelecek şekilde ekleyin. Properties panelindeki value alanından yazıyı Dashboard olarak değiştirin. Styling paneli > Text bölümünden H3 yazı stilini seçerek görsel düzenlemeyi tamamlayalım.
Sol kenara eklenen 2 elementin arasındaki boşluğu ayarlayabilmek için Horizontal Stack elementini seçin. Properties panelinde bulunan Gap parametresi ile eklenmiş elementlerin aralarındaki boşluğu ayarlayın. Bu alana 16px değerini girin.
Şimdi sağ kenardaki profil menüsünü oluşturabilmek için ilk olarak Trigger başlığı altındaki Content Menu elementini sürükle bırak ile ekleyin.
Daha sonra Content Menu içine Image elementini ekleyin. Image elementi seçili iken Properties>imageFit>fill seçimini yap. ImageFit’i fill yaparak yüklenen görselin Image elementinin ölçüsüne uygun bir şekilde ortalanarak sığdırılmasını sağlamış olursunuz.
Image elementi seçiliyken Styling>Layout>Size aracılığıyla genişlik ve yükseklik değerini 32px olarak girin.
Styling>Border>Radius bölümünden Image elementinin dört köşesine 32px’lik Radius değeri vererek görselin yuvarlak bir çerçeve içinde gösterilmesini sağlayın.
Image elementinin görsel ayarını yaptıktan sonra Properties>Value>Uploaded Images aracılığıyla bir avatar görseli ekleyin.
Avatar görseli eklerken Kuika yapay zeka asistanını kullanarak yeni bir görsel oluşturup, kullanabilirsiniz.
Image elementi ile ilgili çalışmaları tamamladıktan sonra ContentMenu’nün içeriklerini düzenleyelim.
İlk olarak ContentMenu seçiliyken Properties>ContentMenu aracılığıyla tek bir menü öğesi kalacak şekilde diğer menü öğelerini silin.
Menü öğesini seçin ve altta açılan Label>Fixed Value aracılığıyla Logout olarak isimlendirin.
Menü öğesi seçiliyken bir stil tanımlayabilmek için Styling>Text>Styles aracılığıyla Button_Secondary stilini seçin. Bir renk vermek için de Color alanından kırmızı rengi seçelim.
Son olarak ContentMenu’nün bulunduğu kolonu seçin ve Styling paneli Layout bölümünden sağa yaslayın.
Header tasarımını hazırladık. Benzer bir çalışma süreciyle ihtiyacın olan üstbilgi alanlarını sen de kolaylıkla hazırlayabilirsin.
Bir sonraki öğrenme içeriğinde Dashboard ekran tasarımını birlikte hazırlayacağız.
