Bu öğrenme içeriğinde, Header Tasarımı videosunda hazırladığımız hamburger menü ikonu ile açılacak menünün tasarımını hazırlayacağız.
Left menü için hazırlanan ekranı Drawer tipinde açacağız. Menu ekranı bir header ve bir footer’a sahiptir. Header içerisinde menü isminin yazdığı bir Label elementi ve menüyü kapatmaya olanak sağlayan bir çıkış ikonu bulunmaktadır. Footer’da ise Horizontal Stack elementi içerisinde bir ikon ve Label elementi yer almaktadır. Menüde Dashboard ekranı, liste ekranı ve yeni personel ekleme ekranına navigasyonu sağlayacak üç menü öğesi bulunmaktadır. Her bir menü öğesi bir Row içinde yer alan Horizontal Stack elementi içerisindeki ikon ve label elementlerinden oluşmaktadır.
Bu öğrenme içeriğinde, Header Tasarımı videosunda hazırladığımız hamburger menü ikonu ile açılacak menünün tasarımını hazırlayacağız.
Öğrenme içeriği sonunda oluşturmayı hedeflediğimiz menu tasarımını inceleyelim.
Left menü için hazırlanan ekranı Drawer tipinde açacağız. Menu ekranı bir header ve bir Footer’a sahiptir. Header içerisinde menü isminin yazdığı bir Label elementi ve menüyü kapatmaya olanak sağlayan bir çıkış ikonu bulunmaktadır. Footer’da ise Horizontal Stack elementi içerisinde bir ikon ve Label elementi yer almaktadır. Menüde Dashboard ekranı, liste ekranı ve yeni personel ekleme ekranına navigasyonu sağlayacak üç menü öğesi bulunmaktadır. Her bir menü öğesi bir Row içinde yer alan Horizontal Stack elementi içerisindeki Ikon ve Label elementlerinden oluşmaktadır.
Yeni bir uygulama oluşturduğunuzda Left Menu ekranı varsayılan olarak gelir. Bu ekran üzerinde çalışabileceğin gibi yeni bir ekran üzerinden de menüyü hazırlayabilirsin.
Mevcut tasarım üzerine ekleme yaparak ilerlemek işlerini kolaylaştıracaktır. Öncelikle Left Menu ekranında varsayılan olarak gelen Dashboard öğesinin bulunduğu Row’u seçin ve çoğaltın.
Duplicate olarak gelen yeni öğenin ikonunu seçin ve Properties panelinde ikonunu değiştirin. Ardından Duplicate olarak gelen Label elementinin metnini Properties paneli >Fixed Value aracılığıyla Employee List olarak girin.
Şimdi Employee List öğesini çoğaltarak üçüncü bir menü öğesini oluşturun.
Üçüncü menü öğesinin ikonunu Properties panelinde, Icon aracılığıyla yeni bir ikon seçerek değiştirin. Label elementinin yazısını Properties paneli > Fixed Value aracılığıyla New Employee olarak değiştirin.
Böylelikle Left Menu tasarımıyla ekran tasarımını tamamlayalım.
Bu öğrenme içeriğinde, Header Tasarımı videosunda hazırladığımız hamburger menü ikonu ile açılacak menünün tasarımını hazırlayacağız.
Left menü için hazırlanan ekranı Drawer tipinde açacağız. Menu ekranı bir header ve bir footer’a sahiptir. Header içerisinde menü isminin yazdığı bir Label elementi ve menüyü kapatmaya olanak sağlayan bir çıkış ikonu bulunmaktadır. Footer’da ise Horizontal Stack elementi içerisinde bir ikon ve Label elementi yer almaktadır. Menüde Dashboard ekranı, liste ekranı ve yeni personel ekleme ekranına navigasyonu sağlayacak üç menü öğesi bulunmaktadır. Her bir menü öğesi bir Row içinde yer alan Horizontal Stack elementi içerisindeki ikon ve label elementlerinden oluşmaktadır.
Bu öğrenme içeriğinde, Header Tasarımı videosunda hazırladığımız hamburger menü ikonu ile açılacak menünün tasarımını hazırlayacağız.
Öğrenme içeriği sonunda oluşturmayı hedeflediğimiz menu tasarımını inceleyelim.
Left menü için hazırlanan ekranı Drawer tipinde açacağız. Menu ekranı bir header ve bir Footer’a sahiptir. Header içerisinde menü isminin yazdığı bir Label elementi ve menüyü kapatmaya olanak sağlayan bir çıkış ikonu bulunmaktadır. Footer’da ise Horizontal Stack elementi içerisinde bir ikon ve Label elementi yer almaktadır. Menüde Dashboard ekranı, liste ekranı ve yeni personel ekleme ekranına navigasyonu sağlayacak üç menü öğesi bulunmaktadır. Her bir menü öğesi bir Row içinde yer alan Horizontal Stack elementi içerisindeki Ikon ve Label elementlerinden oluşmaktadır.
Yeni bir uygulama oluşturduğunuzda Left Menu ekranı varsayılan olarak gelir. Bu ekran üzerinde çalışabileceğin gibi yeni bir ekran üzerinden de menüyü hazırlayabilirsin.
Mevcut tasarım üzerine ekleme yaparak ilerlemek işlerini kolaylaştıracaktır. Öncelikle Left Menu ekranında varsayılan olarak gelen Dashboard öğesinin bulunduğu Row’u seçin ve çoğaltın.
Duplicate olarak gelen yeni öğenin ikonunu seçin ve Properties panelinde ikonunu değiştirin. Ardından Duplicate olarak gelen Label elementinin metnini Properties paneli >Fixed Value aracılığıyla Employee List olarak girin.
Şimdi Employee List öğesini çoğaltarak üçüncü bir menü öğesini oluşturun.
Üçüncü menü öğesinin ikonunu Properties panelinde, Icon aracılığıyla yeni bir ikon seçerek değiştirin. Label elementinin yazısını Properties paneli > Fixed Value aracılığıyla New Employee olarak değiştirin.
Böylelikle Left Menu tasarımıyla ekran tasarımını tamamlayalım.
