Desain Komponen

Dimungkinkan untuk menempatkan elemen pada ruang kosong kanvas secara sederhana, tetapi lebih baik mencoba membuat semuanya rapi dan teratur segera. Oleh karena itu, untuk memulainya, kami akan mendesain ruang kerja. Mari tambahkan komponen ( Container ) ke kanvas tempat kita akan menempatkan semua elemen lainnya. Setelah menambahkan, Anda harus mengklik ikon roda gigi dan melanjutkan ke konfigurasi wadah ini.

Pengaturan wadah

Mari kita pergi melalui pengaturan yang tersedia.

• Name - nama di mana kita dapat merujuk ke wadah ini dalam proses bisnis aplikasi. Misalnya, jika kita ingin membuat proses bisnis untuk mengubah beberapa pengaturan wadah ini.
• Direction - arah di mana elemen-elemen di dalam wadah yang diberikan akan ditata. Secara horizontal, jika Anda ingin mengaturnya dalam satu baris, satu demi satu, atau sebaliknya, secara vertikal, ketika elemen-elemennya berada di bawah satu sama lain.
• Wrap - mengatur output elemen. Haruskah mereka berada di baris yang sama (nowrap), atau dapatkah mereka dibungkus (wrap).
• Alignment - bagaimana elemen dalam wadah harus disejajarkan (pengaturan terpisah untuk perataan horizontal dan vertikal).
• Size - ukuran wadah. Ini dapat diatur sebagai persentase dari ruang yang tersedia atau memiliki ukuran piksel yang tetap.
• Max Width -lebar maksimum yang diizinkan (jika tidak diatur secara ketat dan bervariasi tergantung pada konten).
• Margin/Padding - indentasi dari batas container. Eksternal atau internal, masing-masing.
• Image, Gradient or Overlay (Background color) - kemampuan untuk mengatur latar belakang yang diinginkan. Anda dapat memilih warna tertentu (atau kombinasi warna yang berbeda dengan gradien) atau memilih gambar latar belakang.
• Border - pemilihan bingkai dan penampilannya (warna, ketebalan, radius pembulatan).
• Visible - visibilitas elemen (serta semua elemen bersarang).

Pengaturan yang dipilih dapat dilihat di tangkapan layar. Tentu saja, Anda dapat bereksperimen dan mengubahnya, memilih desain unik Anda.

Mari tambahkan satu lagi ke wadah yang dibuat. Kami akan menambahkan bidang input yang diperlukan ke dalamnya. Atur ke vertikal, rata tengah, lebar 40%, dan padding-kiri kiri (padding-kiri 20px).

komponen aplikasi

Selanjutnya, tambahkan komponen itu sendiri ke wadah. Proses bisnis kami menerima dua nomor tipe float . Untuk memasukkannya, Anda perlu menambahkan dua komponen Input ( float ), sebuah tombol ( Button ), yang akan memulai proses perhitungan, dan membuat penyesuaian visual kecil untuk menandatangani Label mereka.

Mari tambahkan satu blok lagi di mana kita akan menandatangani apa yang kita rencanakan untuk dihitung secara umum (penjumlahan, pengurangan, dll.). Mari kita atur lebarnya menjadi 30% dengan elemen yang diatur secara vertikal, tengah, dan rata kanan ( end/center ). Mari tambahkan 5 komponen Label ke wadah itu sendiri dan segera ubah teksnya ke yang diinginkan.

Langkah terakhir dalam desain visual adalah menambahkan wadah lain untuk menampilkan hasil perhitungan. Kami menambahkannya dengan analogi dengan wadah sebelumnya, tetapi kami mengatur perataan ke kanan dengan bantalan kecil di sebelah kiri. Fitur wadah ini adalah awalnya tidak akan terlihat (saklar Visible mati). Mari kita nyalakan pada saat kita memiliki hasil perhitungan. Mari tambahkan 5 komponen Label ke dalamnya, dan kita bahkan tidak perlu mengubah teksnya karena bloknya masih tidak terlihat (yang utama adalah mengatur Name mereka sehingga Anda dapat mengidentifikasi elemen yang diperlukan saat membuat proses bisnis).

Jika semuanya dilakukan dengan benar, kita akan melihat hasil berikut di desainer web:

Dan ini di aplikasi yang diterbitkan: