คอนเทนเนอร์

การตั้งค่ารูปลักษณ์และความรู้สึก:

Name (บังคับ) - ชื่อของส่วนประกอบ

Direction (จำเป็น) - วิธีการจัดเรียงองค์ประกอบภายในคอนเทนเนอร์ในแนวตั้งหรือแนวนอน แนวนอนเป็นค่าเริ่มต้น

Wrap (บังคับ) - ห่อเนื้อหาเมื่อเกินขอบเขตของคอนเทนเนอร์ Nowrap โดยค่าเริ่มต้น

การ Alignment (บังคับ) - การจัดตำแหน่งองค์ประกอบในคอนเทนเนอร์ เริ่มต้นโดยค่าเริ่มต้น

Sizes (บังคับ) - ขนาดคอนเทนเนอร์ เป็นพิกเซลหรือเปอร์เซ็นต์ ความกว้าง 100% โดยค่าเริ่มต้น

Max Width (บังคับ) - ความกว้างสูงสุดของคอนเทนเนอร์เป็นพิกเซลหรือเปอร์เซ็นต์ 100% โดยค่าเริ่มต้น

ระยะ Margin (จำเป็น) - การเยื้องด้านนอก 0 โดยค่าเริ่มต้น

Padding ว่างภายใน (จำเป็น) - การเยื้องภายใน 0 โดยค่าเริ่มต้น รูปภาพ การไล่ระดับสี หรือภาพซ้อนทับ (ไม่จำเป็น) - สำหรับพื้นหลัง

Background color (ไม่จำเป็น) - สีหลักสำหรับพื้นหลัง

เส้น Border (ไม่จำเป็น) - การตั้งค่าเส้นขอบของส่วนประกอบ

Visible ได้ (จำเป็น) - ทำให้ส่วนประกอบมองเห็นได้หากเปิดใช้งาน เปิดใช้งานโดยค่าเริ่มต้น

ทริกเกอร์เวิร์กโฟลว์:

• onCreate – เริ่มทำงานเมื่อสร้างองค์ประกอบบนเพจ
• onShow – เริ่มทำงานเมื่อส่วนประกอบเปลี่ยนสถานะเป็นมองเห็นได้ (แสดงบนหน้า);
• onHide – เริ่มทำงานเมื่อส่วนประกอบเปลี่ยนสถานะเป็นซ่อน (หยุดแสดง);
• onDestroy – เริ่มทำงานเมื่อส่วนประกอบถูกทำลาย
• onClick - เริ่มทำงานเมื่อส่วนประกอบถูกคลิก

การกระทำของคอมโพเนนต์:

Container get properties

รับคุณสมบัติของคอนเทนเนอร์

พารามิเตอร์ อินพุต :

• Component Id [string] - ตัวระบุส่วนประกอบของคอนเทนเนอร์

พารามิเตอร์ ขา ออก:

• Width [string] - ความกว้างของส่วนประกอบ
• Height [string] - ความสูงของส่วนประกอบ
• Flex direction [enum] - ทิศทางของส่วนประกอบ
• Wrap [enum] - ห่อส่วนประกอบ;
• การ Alignment horizontal [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวนอน
• การ Alignment vertical [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวตั้ง
• ระยะ Margin [string] - ระยะขอบของคอมโพเนนต์
• ช่องว่างภายใน Padding [string] - ช่องว่างภายในของส่วนประกอบ;
• Border [string] - เส้นขอบของส่วนประกอบ
• Background color [string] - สีพื้นหลังของส่วนประกอบ
• Visible [boolean] - สถานะการมองเห็นส่วนประกอบ

Container set properties

รับคุณสมบัติของคอนเทนเนอร์

พารามิเตอร์ อินพุต :

• รหัสส่วนประกอบ [สตริง] - ตัวระบุส่วนประกอบของคอนเทนเนอร์

พารามิเตอร์ ขา ออก:

• Width [string] - ความกว้างของส่วนประกอบ
• Height [string] - ความสูงของส่วนประกอบ
• Flex direction [enum] - ทิศทางของส่วนประกอบ
• Wrap [enum] - ห่อส่วนประกอบ;
• การ Alignment horizontal [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวนอน
• การ Alignment vertical [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวตั้ง
• ระยะ Margin [string] - ระยะขอบของคอมโพเนนต์
• ช่องว่างภายใน Padding [string] - ช่องว่างภายในของส่วนประกอบ;
• Border [string] - เส้นขอบของส่วนประกอบ
• Background color [string] - สีพื้นหลังของส่วนประกอบ
• Visible [boolean] - สถานะการมองเห็นส่วนประกอบ

Container update properties

อัปเดตคุณสมบัติของคอนเทนเนอร์

พารามิเตอร์ อินพุต :

• Component Id [string] - ตัวระบุส่วนประกอบของคอนเทนเนอร์
• Width [string] - ความกว้างของส่วนประกอบ
• Height [string] - ความสูงของส่วนประกอบ
• Flex direction [enum] - ทิศทางของส่วนประกอบ
• Wrap [enum] - ห่อส่วนประกอบ;
• การ Alignment horizontal [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวนอน
• การ Alignment vertica l [enum] - การจัดตำแหน่งของส่วนประกอบตามแนวตั้ง
• ระยะ Margin [string] - ระยะขอบของคอมโพเนนต์
• ช่องว่างภายใน Padding [string] - ช่องว่างภายในของส่วนประกอบ;
• Border [string] - เส้นขอบของส่วนประกอบ
• Border radius [string] - รัศมีเส้นขอบของส่วนประกอบ
• Background color [string] - สีพื้นหลังของส่วนประกอบ
• Visible [boolean] - สถานะการมองเห็นส่วนประกอบ

ตัวอย่างการใช้งาน

สามารถใช้คอนเทนเนอร์เพื่อจัดกลุ่มองค์ประกอบ ตัวอย่างเช่น ในการประกอบแบบฟอร์มจากช่องใส่ต่างๆ กัน: