Thùng đựng hàng

Cài đặt Giao diện:

Name (bắt buộc) - tên của thành phần.

Direction (bắt buộc) - cách các phần tử được sắp xếp bên trong vùng chứa, theo chiều dọc hoặc chiều ngang. Ngang được mặc định.

Wrap (bắt buộc) - gói nội dung khi nó vượt quá giới hạn của vùng chứa. Nowrap theo mặc định

Alignment (bắt buộc) - căn chỉnh các phần tử trong vùng chứa. Bắt đầu theo mặc định.

Sizes (bắt buộc) - kích thước vùng chứa. Tính bằng pixel hoặc tỷ lệ phần trăm. Chiều rộng 100% theo mặc định

Max Width tối đa (bắt buộc) - chiều rộng vùng chứa tối đa tính bằng pixel hoặc phần trăm. 100% theo mặc định.

Margin (bắt buộc) - thụt lề ngoài. 0 theo mặc định.

Padding (bắt buộc) - thụt lề bên trong. 0 theo mặc định Hình ảnh, Dải màu hoặc Lớp phủ (không bắt buộc) - cho nền.

Background color (không bắt buộc) - màu chính cho nền.

Border (không bắt buộc) - cài đặt đường viền thành phần.

Visible (bắt buộc) - hiển thị thành phần nếu được bật. Được bật theo mặc định.

Trình kích hoạt quy trình làm việc:

• onCreate – kích hoạt khi phần tử được tạo trên trang;
• onShow – kích hoạt khi thành phần thay đổi trạng thái thành hiển thị (hiển thị trên trang);
• onHide – kích hoạt khi thành phần thay đổi trạng thái thành ẩn (ngừng hiển thị);
• onDestroy – kích hoạt khi thành phần bị phá hủy;
• onClick - kích hoạt khi thành phần được nhấp.

Hành động thành phần:

Container get properties

Nhận các thuộc tính của vùng chứa.

Thông số đầu vào :

• Component Id [string] - mã định danh của thành phần vùng chứa.

Thông số đầu ra :

• Width [string] - chiều rộng của thành phần;
• Height [string] - chiều cao của các thành phần;
• Flex direction [enum] - hướng của các thành phần;
• Wrap [enum] - gói thành phần;
• Alignment horizontal [enum] - căn chỉnh của thành phần theo chiều ngang;
• Alignment vertical [enum] - căn chỉnh của thành phần theo chiều dọc;
• Margin [string] - lề của thành phần;
• Padding [string] - phần đệm của thành phần;
• Border [string] - đường viền của thành phần;
• Background color [string] - màu nền của thành phần;
• Visible [boolean] - trạng thái hiển thị của thành phần.

Container set properties

Nhận các thuộc tính của vùng chứa.

Thông số đầu vào :

• Id thành phần [chuỗi] - mã định danh của thành phần vùng chứa.

Thông số đầu ra :

• Width [string] - chiều rộng của thành phần;
• Height [string] - chiều cao của các thành phần;
• Flex direction [enum] - hướng của các thành phần;
• Wrap [enum] - gói thành phần;
• Alignment horizontal [enum] - căn chỉnh của thành phần theo chiều ngang;
• Alignment vertical [enum] - căn chỉnh của thành phần theo chiều dọc;
• Margin [string] - lề của thành phần;
• Padding [string] - phần đệm của thành phần;
• Border [string] - đường viền của thành phần;
• Background color [string] - màu nền của thành phần;
• Visible [boolean] - trạng thái hiển thị của thành phần.

Container update properties

Cập nhật thuộc tính của vùng chứa

Thông số đầu vào :

• Component Id [string] - mã định danh của thành phần vùng chứa;
• Width [string] - chiều rộng của thành phần;
• Height [string] - chiều cao của các thành phần;
• Flex direction [enum] - hướng của các thành phần;
• Wrap [enum] - gói thành phần;
• Alignment horizontal [enum] - căn chỉnh của thành phần theo chiều ngang;
• Alignment vertica l [enum] - căn chỉnh của thành phần theo chiều dọc;
• Margin [string] - lề của thành phần;
• Padding [string] - phần đệm của thành phần;
• Border [string] - đường viền của thành phần;
• Border radius [string] - bán kính viền của thành phần;
• Background color [string] - màu nền của thành phần;
• Visible [boolean] - trạng thái hiển thị của thành phần.

ví dụ sử dụng

Một thùng chứa có thể được sử dụng để nhóm các phần tử. Ví dụ: để tập hợp một biểu mẫu từ một số trường nhập liệu khác nhau: