Liste Ekran Tasarımının Hazırlanması

Önceki öğrenme içeriğinde Dashboard ekranı birlikte hazırladık. Bu öğrenme içeriğinde liste ekran tasarımı ile devam edelim.

İlk olarak, hazırlanan liste ekranına bir göz atalım.

Liste ekranında, liste içerisinde belirli bir değer doğrultusunda arama ve filtreleme işlemi için bir TextInput yer almaktadır. Liste ekranında yer alan bir diğer element ise listeleme işlevini sağlayacak olan Table elementidir. Table elementi belirli bir gösterim sayısı belirtilmediği sürece tüm veri kaynağındaki içeriği (dinamik ve/veya statik) göstermek için eklenen veri öğesini, veri kaynağına göre çoğaltır. Bu sebeple ilk satırda eklediğin statik bir değeri diğer satırlarda da gösterilecektir.

Liste ekran tasarımında kullanacağımız Header, Tablo ve Tabbar tasarımları Dashboard ekranda kullandığımız tasarımlarla yakın olduğu için Dashboard ekran tasarımını kopyalayarak ilerleyelim.

1. Sol kenardan Screens panelini açın ve Dashboard ekranının üzerine imleç ile gelin.
2. Detay menü aracılığıyla ekranı çoğaltın.
3. Gelen ekranın detay menüsü aracılığıyla ismini List olarak güncelleyin.
4. Header’da yer alan Dashboard yazısı üzerine iki kez tıklayın ve Employee List olarak yazıyı güncelleyin.
5. Kopyalanan ekranda yer alan kart yapısını kaldırmakla devam edelim. İlk olarak soldaki kart yapısını oluşturan Row’u silin. Daha sonra sağdaki kart yapısını oluşturan Row’u silin.
6. En dışta kalan 2 kolonlu Row’u tek kolonlu yapıya dönüştürün.
7. Kolon içerisine bir Row’u sürükleyip bırakın. Ardından eklediğiniz Row’u sol kolonu 20 birim sağ kolonu 4 birim olacak şekilde 2 kolonlu yapıya dönüştürün.
8. Row elementi seçiliyken Styling paneli Layout alanında bulunan Row hazır stilini kaldırın ve None Stilini ekleyin.
9. Ardından Fill alanından White hazır stilini seçin.
10. Border alanından ise Radius hazır stilini seçin.
11. Ardından solda yer alan kolon içerisine bir TextInput elementi ekleyin.
12. TextInput’un Placeholder metnini değiştirin.
13. TextInput’un varsayılan olarak gelen kenarlık rengini Border aracılığıyla beyaz yapın.
14. Sağdaki kolona bir icon elementi sürükleyip bırakın.
15. İkon kütüphanesi aracılığıyla ikon seçimini yapın. İkon seçiliyken Styling paneli Text alanından Size değerini 24 Piksel olarak değiştirin.
16. İkon elementinin ebeveyni olan kolonu BreadCrumb aracılığıyla seçin. Styling paneli Layout alanından kolon içerisinde yer alan elementi yatayda ve dikeyde ortalayın.

Liste ekranının ilk yapısını tamamladık. Listeleme işlemini yürütecek Tablo elementi ile devam edelim.

17. Ekranda bulunan Recently Added Employees Label’inin bulunduğu ebeveyn Row’u silin.
18. Tabloyu seçin ve tablonun üçüncü kolonunu Properties paneli aracılığıyla silin.
19. Ardından Tablonun ikinci kolonunda yer alan personel adı yanına bir Label elementini sürükleyip bırakın. Label elementi varsayılan olarak Inline yapıda gelecektir. Label elementi seçiliyken Styling>Layout alanında Block görünümü seçin. Label’in bir alt satıra kaydığını fark edeceksiniz.
20. Aynı işlemi personel ismi yazan Label’da da uygulayın.
21. Ardından yeni eklediğiniz Label elementi üzerine iki kez tıklayın ve geçici bir unvan girin.
22. Unvan yazan Label elementi seçiliyken Styling>Text alanından Paragraph hazır stilini kaldırın ve H6 hazır stilini ekleyin.

İşte tablo tasarımımız hazır!

Son olarak Tabbar’da yer alan Dashboard ve Employee List metinlerinin rengini değiştirin.

Artık hazırsınız.