thiết kế thành phần

Có thể đặt các phần tử vào khoảng trống của khung vẽ một cách đơn giản, nhưng tốt hơn hết bạn nên cố gắng làm cho mọi thứ gọn gàng và ngăn nắp ngay lập tức. Do đó, để bắt đầu, chúng tôi sẽ thiết kế không gian làm việc. Hãy thêm một thành phần ( Container ) vào canvas nơi chúng ta sẽ đặt tất cả các thành phần khác. Sau khi thêm, bạn nên nhấp vào biểu tượng bánh răng và tiến hành cấu hình vùng chứa này.

Cài đặt vùng chứa

Hãy đi qua các cài đặt có sẵn.

• Name - tên mà chúng ta có thể tham chiếu đến vùng chứa này trong quy trình kinh doanh của ứng dụng. Ví dụ: nếu chúng tôi muốn tạo quy trình kinh doanh để thay đổi một số cài đặt của vùng chứa này.
• Direction - hướng mà các phần tử bên trong vùng chứa nhất định sẽ được bố trí. Theo chiều ngang, nếu bạn muốn sắp xếp chúng thành một hàng, nối tiếp nhau hoặc ngược lại, theo chiều dọc, khi các phần tử nằm dưới nhau.
• Wrap - thiết lập đầu ra của các phần tử. Chúng có nên nằm trên cùng một dòng (nowrap) hay chúng có thể được bọc (quấn).
• Alignment - cách căn chỉnh các phần tử trong vùng chứa (cài đặt riêng cho căn chỉnh ngang và dọc).
• Size - kích thước thùng chứa. Nó có thể được đặt theo tỷ lệ phần trăm của không gian có sẵn hoặc có kích thước cố định nghiêm ngặt tính bằng pixel.
• Max Width tối đa - chiều rộng tối đa cho phép (trong trường hợp nó không được đặt nghiêm ngặt và thay đổi tùy theo nội dung).
• Margin/Padding - thụt lề từ đường viền vùng chứa. Bên ngoài hoặc bên trong, tương ứng.
• Image, Gradient or Overlay (Background color) - khả năng đặt nền mong muốn. Bạn có thể chọn một màu cụ thể (hoặc kết hợp các màu khác nhau với một dải màu) hoặc chọn một hình nền.
• Border - lựa chọn khung và hình thức của nó (màu sắc, độ dày, bán kính làm tròn).
• Visible - khả năng hiển thị của phần tử (cũng như tất cả các phần tử lồng nhau).

Các cài đặt đã chọn có thể được nhìn thấy trong ảnh chụp màn hình. Tất nhiên, bạn có thể thử nghiệm và thay đổi chúng bằng cách chọn thiết kế độc đáo của mình.

Hãy thêm một cái khác vào vùng chứa đã tạo. Chúng tôi sẽ thêm các trường đầu vào cần thiết vào nó. Đặt nó thành chiều dọc, căn giữa, chiều rộng 40% và padding-left bên trái (padding-left 20px).

thành phần ứng dụng

Tiếp theo, thêm các thành phần vào vùng chứa. Quy trình kinh doanh của chúng tôi chấp nhận hai số loại float . Để nhập chúng, bạn cần thêm hai thành phần Input ( float ), một Button sẽ bắt đầu quá trình tính toán và thực hiện một điều chỉnh trực quan nhỏ để ký Label của chúng.

Hãy thêm một khối nữa, nơi chúng tôi sẽ ký những gì chúng tôi dự định tính toán nói chung (tổng, trừ, v.v.). Hãy đặt chiều rộng thành 30% với các thành phần được sắp xếp theo chiều dọc, căn giữa và căn phải ( end/center ). Hãy thêm 5 thành phần Label vào chính vùng chứa và ngay lập tức thay đổi văn bản của chúng thành văn bản mong muốn.

Bước cuối cùng trong thiết kế trực quan là thêm một vùng chứa khác để hiển thị kết quả tính toán. Chúng tôi đã thêm nó bằng cách tương tự với vùng chứa trước đó, nhưng chúng tôi đặt căn chỉnh sang bên phải với một khoảng đệm nhỏ ở bên trái. Tính năng của vùng chứa này là ban đầu nó sẽ ẩn (công tắc Visible bị tắt). Hãy bật nó lên ngay khi chúng ta có kết quả tính toán. Hãy thêm 5 thành phần Label vào nó và chúng ta thậm chí không cần thay đổi văn bản của chúng vì khối vẫn ẩn (điều chính là đặt Name của chúng để bạn có thể xác định thành phần cần thiết khi tạo quy trình kinh doanh).

Nếu mọi thứ đã được thực hiện chính xác, chúng ta sẽ thấy kết quả sau trong trình thiết kế web:

Và điều này trong ứng dụng đã xuất bản: