Hızlandırılmış Kurs 101
10 Modüller
5 haftalar

Bileşen Tasarımı

Kopyalamak için tıklayın

Web uygulamaları için grafik bileşenlerin tasarımı


Öğeleri tuvalin boş alanına basitçe yerleştirmek mümkün olabilir, ancak her şeyi hemen düzenli ve düzenli hale getirmeye çalışmak daha iyidir. Bu nedenle, başlangıçta çalışma alanını tasarlayacağız. Diğer tüm elemanları yerleştireceğimiz tuvale bir bileşen ( Container ) ekleyelim. Ekledikten sonra dişli simgesine tıklamalı ve bu konteynerin konfigürasyonuna geçmelisiniz.

Kapsayıcı ayarları

Mevcut ayarları gözden geçirelim.

  • Name - uygulamanın iş süreçlerinde bu kapsayıcıya başvurabileceğimiz ad. Örneğin, bu kapsayıcının bazı ayarlarını değiştirmek için bir iş süreci oluşturmak istiyorsak.
  • Direction - verilen kabın içindeki elemanların yerleştirileceği yön. Yatay olarak, üst üste, birbiri ardına veya tam tersi, öğeler birbirinin altına girdiğinde dikey olarak düzenlemek istiyorsanız.
  • Wrap - öğelerin çıktısını ayarlama. Aynı satırda mı olmalılar (nowrap) yoksa sarılabilirler mi (sarmalar).
  • Alignment - kaptaki öğelerin nasıl hizalanması gerektiği (yatay ve dikey hizalama için ayrı ayar).
  • Size - konteyner boyutu. Kullanılabilir alanın yüzdesi olarak ayarlanabilir veya piksel olarak kesinlikle sabit bir boyuta sahip olabilir.
  • Max Width -izin verilen maksimum genişlik (kesin olarak ayarlanmaması ve içeriğe bağlı olarak değişmesi durumunda).
  • Margin/Padding - kap kenarlarından girinti. Sırasıyla harici veya dahili.
  • Image, Gradient or Overlay (Background color) - istenen arka planı ayarlama yeteneği. Belirli bir rengi (veya gradyanlı farklı renklerin bir kombinasyonunu) seçebilir veya bir arka plan görüntüsü seçebilirsiniz.
  • Border - çerçevenin seçimi ve görünümü (renk, kalınlık, yuvarlama yarıçapı).
  • Visible - öğenin görünürlüğü (ve tüm iç içe öğeler).

Seçilen ayarlar ekran görüntüsünde görülebilir. Elbette, benzersiz tasarımınızı seçerek bunları deneyebilir ve değiştirebilirsiniz.

Oluşturulan kapsayıcıya bir tane daha ekleyelim. Gerekli girdi alanlarını buna ekleyeceğiz. Dikey, ortaya hizalanmış, %40 genişliğe ve sol dolguya (sol dolgu 20 piksel) ayarlayın.

Uygulama bileşenleri

Ardından, bileşenlerin kendilerini kapsayıcıya ekleyin. İş sürecimiz iki adet float tipini kabul etmektedir. Bunları girmek için, hesaplama sürecini başlatacak iki Input bileşeni ( float ), bir düğme ( Button ) eklemeniz ve Label imzalamak için küçük bir görsel ayarlama yapmanız gerekir.

Genel olarak hesaplamayı planladığımızı (toplama, çıkarma vb.) işaretleyeceğimiz bir blok daha ekleyelim. Elemanları dikey, ortalanmış ve sağa hizalı ( end/center ) olacak şekilde genişliği %30 olarak ayarlayalım. 5 Label bileşenini kabın kendisine ekleyelim ve metinlerini hemen istenilen şekilde değiştirelim.

Görsel tasarımdaki son adım, hesaplama sonucunu görüntülemek için başka bir kap eklemektir. Önceki kapsayıcıya benzeterek ekledik, ancak hizalamayı solda küçük bir dolgu ile sağa ayarladık. Bu kapsayıcının özelliği, başlangıçta görünmez olmasıdır ( Visible anahtarı kapalıdır). Hesapların sonucunu aldığımız anda açalım. Buna 5 Label bileşeni ekleyelim ve blok hala görünmez olduğu için metinlerini değiştirmemize bile gerek yok (asıl olan, iş süreçleri oluştururken gerekli öğeyi tanımlayabilmeniz için Name ayarlamaktır).

Her şey doğru yapıldıysa, web tasarımcısında aşağıdaki sonucu göreceğiz:

Ve bu yayınlanan uygulamada:

Was this article helpful?
Hala bir cevap mı arıyorsunuz?
Topluluğa Katılın