Önceki öğrenme içeriğinde üstbilgi bölümü ile tasarımına başladığımız Dashboard ekranının, gövdesinde bulunan öğelerin tasarımını bu öğrenme içeriğinde gerçekleştireceğiz. Bu öğrenme içeriğinde header, card yapısı ve listeleme yapısına sahip bir dashboard ekran tasarımını tamamlamış olacağız.
Önceki öğrenme içeriğinde üstbilgi bölümü ile tasarımına başladığımız Dashboard ekranının, gövdesinde bulunan öğelerin tasarımı ile devam edelim.
İlk olarak öğrenme içeriği sonunda tamamlamış olacağımız Dashboard ekranını inceleyerek başlayalım. Bu öğrenme içeriğinde Header, Card yapısı ve Listeleme yapısına sahip bir Dashboard ekran tasarımını tamamlamış olacağız.
Bir önceki öğrenme içeriğinde hazırlamış olduğumuz Header tasarımını yaptığımız ekran üzerinden devam ediyoruz.
Header altında personel ve departman sayısının gösterildiği Kart tipinde bir özet görüyoruz. Kart yapısının altında ise son eklenen personellerin listelenmesini sağlayan bir liste yapısı yer almaktadır. Liste yapısını oluşturmak için Data Repeater kategorisinde yer alan Table elementini kullanacağız.
Kart tipinde görünümleri hazırlarken iç içe Row elementleri ile görsel tasarımı hazırlayabilirsiniz. Temelde herhangi bir elementi ekrana sürüklediğinizde ekranda bir bölüm olarak durabilmesi için bir Row elementine ihtiyaç vardır. İlk Row elementinden sonra her bir kart yapısı için ayrıca tek kolona sahip bir Row elementi daha oluşturmalısın. Ardından bu kolon içindeki elementleri nasıl eklemek istiyorsan buna göre tekrarlı olarak satır bazındaki görünümler için Row elementi eklemelisiniz.
Şimdi gösterilen bu Dashboard ekranını birlikte hazırlamaya başlayalım.
Dashboard’da yer alan ve görselde görülen ikili özet kart görünümünü oluşturmak için öncelikle ekrana Row elementini sürükle-bırak ile ekleyin. Row elementinin iç boşluk ayarını yani Padding ayarlarını düzenlemek için Styling > Layout > Styles > Row seçimini kaldır.
Burada küçük bir bilgiden bahsetmekte fayda var. Her bir Row elementinin kendisi için 8px, içindeki her bir kolon içinde de yine 8px değerinde Padding varsayılan olarak gelir. Bu dört yönde uygulanan 8px Padding değeri hemen her elementin Layout stilinde bulunur. Bu değeri dilediğin zaman değiştirebilirsin. Hazırladığımız kart tasarımı için iç içe eklenen Row elementinin her birinde toplam 16px değerinde Padding bulunacaktır. Bu değerleri tasarımındaki ihtiyaçlarına göre kaldırabilirsin. Böylece daha düzenli ve hizalı bir ekran tasarımına sahip olursun.
Şimdi kaldığımız yerden devam edelim.
Row elementi seçiliyken Properties paneli aracılığıyla kolon sayısını 2 kolon olacak şekilde ayarla.
Row içindeki sol kolona bir Row elementini sürükleyip-bırak. Eklenen Row elementini Properties aracılığıyla tek kolona dönüştür. Ardından Row elementi seçiliyken Styling>Fill>Color bölümünden>White rengini seç. Devamında Border>Radius alanı ile Row’un dört köşesine 8px’ lik bir Radius değeri gir. Kartın kendisini hazırladık. Şimdi içeriğinde bulunacak elementleri ekleyelim.
Kart görünümü için hazırlanan Row elementi içerisine bir Row elementini daha sürükleyip-bırak. Properties paneli aracılığıyla bu Row elementini iki kolonlu, sol kolonunun sağ kolonundan daha geniş olduğu bir yapıya dönüştür.
Sol kolon içerisine bir Label elementi ekle. Eklenen Label elementi için Properties>Value>Fixed Value aracılığıyla yazısını Employees olarak gir.
Daha sonra sağdaki kolona personelleri temsil eden bir ikon elementi ekleyelim. Bunun için Icon elementini kolona ekle.
Properties paneli aracılığıyla ikon kütüphanesinden bir ikon seçin. Styling paneli>Text>Color aracılığıyla ikon rengini kırmızı olarak değiştir.
Daha sonra Icon elementinin yer aldığı kolonu seçerek Styling paneli>Layout bölümünden>Align ile Sağa Yaslı olarak hizala.
Karta ikinci bir satır daha ekleyelim. Kart içine ve ilk satırın altına bir Row elementi daha ekleyelim. Properties paneli aracılığıyla bu Row elementini tek kolonlu bir yapıya dönüştür.
Ardından bu Row içerisine personellerin toplam sayısının yazacağı bir Label elementini ekleyelim. Properties panelinden Value>Fixed Value aracılığıyla Label metnini 255 olarak geçici bir değer girin.
Styling panelinden Text>Styles>H1 seç.
İlk Card yapısının en dışındaki Row’u Item Tree ve/veya Breadcrumb aracılığıyla seç. Context menüden Duplicate ile çoğalt. Çoğalttığınız Kartlardan birini sağdaki ikinci kolona sürükle bırak ile yerleştirin.
Sağdaki kartın içeriğini güncelleyelim. Label elementini seç. Properties panelinden Value>Fixed Value ile Department değerini gir.
Sonra Icon elementini seç ve Properties panelinden ikonunu değiştir. Styling panelinden Text>Color aracılığıyla ikona turuncu rengini ver.
Alt satırda yer alan Label elementini seçerek Properties panelinden Value>Fixed Value aracılığıyla Label metnini 14 değerini gir.
Dashboard'da özet görünümü sağlayacak kart bölümünü tamamladık. İlerleyen derslerde buradaki sayılara veri bağlayarak dinamik olarak değişmesini sağlayacağız.
Şimdi Kart bölümünün altında son eklenen personelleri gösteren bir liste tasarımı yapalım.
İlk olarak özet görünümünün altına bir Row elementi ekle. Bu Row elementini tek kolona dönüştür.
Kolonu seçerek Styling panelinden Fill bölümü ile arkaplan rengini beyaz olarak değiştir. Border bölümünden de köşelere 8px değerinde 4 yönde radius değerini ver.
Üst kenardaki kart bölümüyle hizalanabilmesi için Row elementini seçerek Layout bölümünde Padding değerine dört yönde 16px değerini gir.
Kolon içine bir Row elementi ekle. Bu Row elementini 2 kolona dönüştür. Bu bölümü listenin başlığı için kullanacağız. Soldaki kolona bir Label elementi ekleyerek Value alanına Recently Added Employees metnini gir.
Ardından Label elementine Styling>Text bölümünden>H3 stilini tanımla.
İkinci kolona yine bir Label elementini ekleyerek değerini Show all olarak değiştirin. Styling paneli Text bölümünden Button_Secondary olarak stilini değiştirin. Link tipinde bir görünüm sağlayabilmek için Options alanından Altı Çizili tipini seç.
Sağda yer alan kolonu seçerek Styling paneli Layout bölümü Align alanından Sağa Yaslı ile Label elementini bulunduğu kolon içerisinde sağa yasla. Buraya kadar Listenin başlık bölümünü tamamladık.
Şimdi başlık bölümündeki Row elementinin altına bir Row elementi daha ekle. Properties paneli üzerinden tek kolona dönüştür.
Row elementi içine Table elementi ekle.
Table elementi varsayılan olarak bir tablo sütun başlığı ile gelir. Properties panelinde >showHeader alanından >Switch’i kapatarak kolon başlıklarını gizle.
Şimdi Table elementinde görüntülenecek veriler için elementler ekleyelim.
Table elementinin ilk kolonuna bir Image elementi ekle. Properties paneli imageFit alanından fill tipini seç.
Ardından Styling paneli Layout bölümü Size alanında genişlik ve yükseklik için 32 px değerini gir.
Border bölümünden Radius ile dört köşe için de 32px’lik Radius değeri gir. Bu Radius ile eklenen görselin yuvarlak bir çerçeve içinde görünmesini sağlayacaktır.
Image elementinin görsel ayarını yaptıktan sonra Properties paneli Value alanından Uploaded Images aracılığıyla geçici bir görsel ekle.
Görsel kütüphanesine bir görsel ekleyebilmek için Uploaded image seçildikten sonra yükle butonuna tıkla. Açılan alana görseli sürükle bırak ile görsel ekleyebilir veya bilgisayarından seçebilirsin.
Ayrıca görsel eklerken Kuika yapay zeka asistanını kullanarak yeni bir görsel oluşturup, kullanabilirsin.
Table elementinin ikinci kolonuna personel isminin yazacağı bir Label elementi ekleyerek Value alanına geçici bir isim ekle. İlerleyen modüllerde hazırladığımız bu tabloya veri bağlantısı yaptığımızda buradaki Label dinamik veri alacak şekilde ayarlayacağız.
Table elementinin üçüncü kolonuna departman isimlerinin yazacağı bir Label elementi ekleyin ve Value alanına departman ismini yazın.
Table elementinin dördüncü kolonuna ise personel detayını gösterecek Drawer için bir Icon elementi ekle.
Properties paneli üzerinden bir ikon seç. Styling paneli Text bölümünden ikon rengini değiştir. Son olarak Icon elementinin bulunduğu Table kolonunu seç ve Styling paneli Layout bölümüyle ikonu bulunduğu kolon içinde sağa yaslayın.
Son olarak ekranda boş bir yere tıklayıp Properties paneli Role bölümünden Starting Screen rolünü seçin. Bu işlem uygulamanızın başlangıç ekranını belirleyecektir.
Bu işlemlerle birlikte Dashboard ekran tasarımını tamamlamış oldun. Dashboard ekranını isteğin doğrultusunda geliştirebilir ve içerik bakımından zenginleştirebilirsin.
Önceki öğrenme içeriğinde üstbilgi bölümü ile tasarımına başladığımız Dashboard ekranının, gövdesinde bulunan öğelerin tasarımını bu öğrenme içeriğinde gerçekleştireceğiz. Bu öğrenme içeriğinde header, card yapısı ve listeleme yapısına sahip bir dashboard ekran tasarımını tamamlamış olacağız.
Önceki öğrenme içeriğinde üstbilgi bölümü ile tasarımına başladığımız Dashboard ekranının, gövdesinde bulunan öğelerin tasarımı ile devam edelim.
İlk olarak öğrenme içeriği sonunda tamamlamış olacağımız Dashboard ekranını inceleyerek başlayalım. Bu öğrenme içeriğinde Header, Card yapısı ve Listeleme yapısına sahip bir Dashboard ekran tasarımını tamamlamış olacağız.
Bir önceki öğrenme içeriğinde hazırlamış olduğumuz Header tasarımını yaptığımız ekran üzerinden devam ediyoruz.
Header altında personel ve departman sayısının gösterildiği Kart tipinde bir özet görüyoruz. Kart yapısının altında ise son eklenen personellerin listelenmesini sağlayan bir liste yapısı yer almaktadır. Liste yapısını oluşturmak için Data Repeater kategorisinde yer alan Table elementini kullanacağız.
Kart tipinde görünümleri hazırlarken iç içe Row elementleri ile görsel tasarımı hazırlayabilirsiniz. Temelde herhangi bir elementi ekrana sürüklediğinizde ekranda bir bölüm olarak durabilmesi için bir Row elementine ihtiyaç vardır. İlk Row elementinden sonra her bir kart yapısı için ayrıca tek kolona sahip bir Row elementi daha oluşturmalısın. Ardından bu kolon içindeki elementleri nasıl eklemek istiyorsan buna göre tekrarlı olarak satır bazındaki görünümler için Row elementi eklemelisiniz.
Şimdi gösterilen bu Dashboard ekranını birlikte hazırlamaya başlayalım.
Dashboard’da yer alan ve görselde görülen ikili özet kart görünümünü oluşturmak için öncelikle ekrana Row elementini sürükle-bırak ile ekleyin. Row elementinin iç boşluk ayarını yani Padding ayarlarını düzenlemek için Styling > Layout > Styles > Row seçimini kaldır.
Burada küçük bir bilgiden bahsetmekte fayda var. Her bir Row elementinin kendisi için 8px, içindeki her bir kolon içinde de yine 8px değerinde Padding varsayılan olarak gelir. Bu dört yönde uygulanan 8px Padding değeri hemen her elementin Layout stilinde bulunur. Bu değeri dilediğin zaman değiştirebilirsin. Hazırladığımız kart tasarımı için iç içe eklenen Row elementinin her birinde toplam 16px değerinde Padding bulunacaktır. Bu değerleri tasarımındaki ihtiyaçlarına göre kaldırabilirsin. Böylece daha düzenli ve hizalı bir ekran tasarımına sahip olursun.
Şimdi kaldığımız yerden devam edelim.
Row elementi seçiliyken Properties paneli aracılığıyla kolon sayısını 2 kolon olacak şekilde ayarla.
Row içindeki sol kolona bir Row elementini sürükleyip-bırak. Eklenen Row elementini Properties aracılığıyla tek kolona dönüştür. Ardından Row elementi seçiliyken Styling>Fill>Color bölümünden>White rengini seç. Devamında Border>Radius alanı ile Row’un dört köşesine 8px’ lik bir Radius değeri gir. Kartın kendisini hazırladık. Şimdi içeriğinde bulunacak elementleri ekleyelim.
Kart görünümü için hazırlanan Row elementi içerisine bir Row elementini daha sürükleyip-bırak. Properties paneli aracılığıyla bu Row elementini iki kolonlu, sol kolonunun sağ kolonundan daha geniş olduğu bir yapıya dönüştür.
Sol kolon içerisine bir Label elementi ekle. Eklenen Label elementi için Properties>Value>Fixed Value aracılığıyla yazısını Employees olarak gir.
Daha sonra sağdaki kolona personelleri temsil eden bir ikon elementi ekleyelim. Bunun için Icon elementini kolona ekle.
Properties paneli aracılığıyla ikon kütüphanesinden bir ikon seçin. Styling paneli>Text>Color aracılığıyla ikon rengini kırmızı olarak değiştir.
Daha sonra Icon elementinin yer aldığı kolonu seçerek Styling paneli>Layout bölümünden>Align ile Sağa Yaslı olarak hizala.
Karta ikinci bir satır daha ekleyelim. Kart içine ve ilk satırın altına bir Row elementi daha ekleyelim. Properties paneli aracılığıyla bu Row elementini tek kolonlu bir yapıya dönüştür.
Ardından bu Row içerisine personellerin toplam sayısının yazacağı bir Label elementini ekleyelim. Properties panelinden Value>Fixed Value aracılığıyla Label metnini 255 olarak geçici bir değer girin.
Styling panelinden Text>Styles>H1 seç.
İlk Card yapısının en dışındaki Row’u Item Tree ve/veya Breadcrumb aracılığıyla seç. Context menüden Duplicate ile çoğalt. Çoğalttığınız Kartlardan birini sağdaki ikinci kolona sürükle bırak ile yerleştirin.
Sağdaki kartın içeriğini güncelleyelim. Label elementini seç. Properties panelinden Value>Fixed Value ile Department değerini gir.
Sonra Icon elementini seç ve Properties panelinden ikonunu değiştir. Styling panelinden Text>Color aracılığıyla ikona turuncu rengini ver.
Alt satırda yer alan Label elementini seçerek Properties panelinden Value>Fixed Value aracılığıyla Label metnini 14 değerini gir.
Dashboard'da özet görünümü sağlayacak kart bölümünü tamamladık. İlerleyen derslerde buradaki sayılara veri bağlayarak dinamik olarak değişmesini sağlayacağız.
Şimdi Kart bölümünün altında son eklenen personelleri gösteren bir liste tasarımı yapalım.
İlk olarak özet görünümünün altına bir Row elementi ekle. Bu Row elementini tek kolona dönüştür.
Kolonu seçerek Styling panelinden Fill bölümü ile arkaplan rengini beyaz olarak değiştir. Border bölümünden de köşelere 8px değerinde 4 yönde radius değerini ver.
Üst kenardaki kart bölümüyle hizalanabilmesi için Row elementini seçerek Layout bölümünde Padding değerine dört yönde 16px değerini gir.
Kolon içine bir Row elementi ekle. Bu Row elementini 2 kolona dönüştür. Bu bölümü listenin başlığı için kullanacağız. Soldaki kolona bir Label elementi ekleyerek Value alanına Recently Added Employees metnini gir.
Ardından Label elementine Styling>Text bölümünden>H3 stilini tanımla.
İkinci kolona yine bir Label elementini ekleyerek değerini Show all olarak değiştirin. Styling paneli Text bölümünden Button_Secondary olarak stilini değiştirin. Link tipinde bir görünüm sağlayabilmek için Options alanından Altı Çizili tipini seç.
Sağda yer alan kolonu seçerek Styling paneli Layout bölümü Align alanından Sağa Yaslı ile Label elementini bulunduğu kolon içerisinde sağa yasla. Buraya kadar Listenin başlık bölümünü tamamladık.
Şimdi başlık bölümündeki Row elementinin altına bir Row elementi daha ekle. Properties paneli üzerinden tek kolona dönüştür.
Row elementi içine Table elementi ekle.
Table elementi varsayılan olarak bir tablo sütun başlığı ile gelir. Properties panelinde >showHeader alanından >Switch’i kapatarak kolon başlıklarını gizle.
Şimdi Table elementinde görüntülenecek veriler için elementler ekleyelim.
Table elementinin ilk kolonuna bir Image elementi ekle. Properties paneli imageFit alanından fill tipini seç.
Ardından Styling paneli Layout bölümü Size alanında genişlik ve yükseklik için 32 px değerini gir.
Border bölümünden Radius ile dört köşe için de 32px’lik Radius değeri gir. Bu Radius ile eklenen görselin yuvarlak bir çerçeve içinde görünmesini sağlayacaktır.
Image elementinin görsel ayarını yaptıktan sonra Properties paneli Value alanından Uploaded Images aracılığıyla geçici bir görsel ekle.
Görsel kütüphanesine bir görsel ekleyebilmek için Uploaded image seçildikten sonra yükle butonuna tıkla. Açılan alana görseli sürükle bırak ile görsel ekleyebilir veya bilgisayarından seçebilirsin.
Ayrıca görsel eklerken Kuika yapay zeka asistanını kullanarak yeni bir görsel oluşturup, kullanabilirsin.
Table elementinin ikinci kolonuna personel isminin yazacağı bir Label elementi ekleyerek Value alanına geçici bir isim ekle. İlerleyen modüllerde hazırladığımız bu tabloya veri bağlantısı yaptığımızda buradaki Label dinamik veri alacak şekilde ayarlayacağız.
Table elementinin üçüncü kolonuna departman isimlerinin yazacağı bir Label elementi ekleyin ve Value alanına departman ismini yazın.
Table elementinin dördüncü kolonuna ise personel detayını gösterecek Drawer için bir Icon elementi ekle.
Properties paneli üzerinden bir ikon seç. Styling paneli Text bölümünden ikon rengini değiştir. Son olarak Icon elementinin bulunduğu Table kolonunu seç ve Styling paneli Layout bölümüyle ikonu bulunduğu kolon içinde sağa yaslayın.
Son olarak ekranda boş bir yere tıklayıp Properties paneli Role bölümünden Starting Screen rolünü seçin. Bu işlem uygulamanızın başlangıç ekranını belirleyecektir.
Bu işlemlerle birlikte Dashboard ekran tasarımını tamamlamış oldun. Dashboard ekranını isteğin doğrultusunda geliştirebilir ve içerik bakımından zenginleştirebilirsin.
