เริ่มต้นอย่างรวดเร็ว
FlexLayout จัดการหน้าจอแบ่งในทิศทางเดียวเป็นหลัก.
การแบ่งแถวพื้นฐาน
isResizePanel = trueในกรณีนี้ resizePanel จะถูกเรนเดอร์เป็นพี่น้องของคอนเทนเนอร์ ตัวอย่างเช่น เจ้าของ resizePanel ที่อยู่ระหว่าง Mid คอนเทนเนอร์และ Right คือ Mid แต่ mid-resizePanel จะจัดการพี่น้องทั้งสองข้างของมัน.isResizePanelหากติดตั้งที่องค์ประกอบสุดท้าย อาจทำให้เกิดปัญหาประสบการณ์ผู้ใช้โดยทับซ้อนกับฟังก์ชันการปรับขนาดของเว็บเบราว์เซอร์.เมื่อจำเป็นต้องเรนเดอร์แบบไดนามิกตามด้านล่าง.
isResizePanelแนะนำให้ใช้ state แทนการเรนเดอร์เป็น true ล่วงหน้า.การแบ่งคอลัมน์ + การเติบโต
กำหนดอัตราส่วนเฉพาะในพื้นที่แนวตั้งล่วงหน้า
ดังนั้นในโค้ดด้านบน คอนเทนเนอร์ด้านบนจะได้รับการเติบโต = 0.45 และคอนเทนเนอร์กลางและขวาจะได้รับการเติบโต = 1.275.
มัลติครอส (ซ้อนกัน)
การแบ่งมากกว่าหนึ่งทิศทางสร้าง FlexLayout ซ้อนกัน.
(ในเอกสารนี้ CodeBlock ทำหน้าที่เป็นความสูงโดยปริยาย.)
เช่นเดียวกัน หากไม่มีพื้นที่ว่างที่สามารถปรับขนาดได้ การปรับขนาดจะไม่ทำงาน.
หากไม่ต้องการให้มีผลกระทบ แนะนำให้ห่อ div เป็นลูกหลานที่เป็นสายตรงก่อน.
นอกจากนี้ เพื่อป้องกันการทำงานที่ไม่ตั้งใจ แนะนำไม่ให้สร้างลูกหลานตรงมากกว่าสองตัว
min/max + isFitContent
การจำกัดขอบเขตการปรับขนาด + การจำกัดตามขนาดของเนื้อหา
สามารถกำหนดขนาดขั้นต่ำ/สูงสุดใน FlexLayoutContainer โดยใช้ css เพื่อควบคุมขอบเขตการปรับขนาดได้
หรือสามารถใช้แบบนี้ได้
ผลลัพธ์การทำงานมีดังนี้
หากต้องการกำหนดขนาดสูงสุดของเนื้อหาภายในให้เป็นขนาดสูงสุด
<FlexLayoutContainer isFitContent>...</FlexLayoutContainer>สามารถใช้ isFitContent ได้ คอนเทนเนอร์ที่ใช้ isFitContent จะไม่ปรับขนาดใหญ่กว่าขนาดขององค์ประกอบลูกภายในisFitContentจะทำให้เนื่องจากค่าของพื้นที่ที่สามารถเคลื่อนที่ได้มีค่าน้อยกว่าค่าของพื้นที่ที่สามารถเคลื่อนที่ได้ จึงทำให้เลย์เอาต์ไม่สามารถปรับขนาดได้อย่างสมบูรณ์ หากไม่ต้องการให้เป็นเช่นนั้น อย่ากำหนดค่าขนาดสูงสุดให้กับทุกคอนเทนเนอร์ คอนเทนเนอร์อย่างน้อยหนึ่งตัวต้องไม่มีค่าขนาดสูงสุด
โหมดการเคลื่อนย้ายแผง (panelMovementMode)
วิธีการโต้ตอบกับแผงที่อยู่ติดกันเมื่อปรับขนาด
panelMovementModeเป็นคุณสมบัติที่ควบคุมว่าเมื่อปรับขนาดแผงจะเคลื่อนที่แผงที่อยู่ติดกันอย่างไร ค่าพื้นฐานคือ divorceและสามารถใช้โหมดด้านล่างได้
bulldozer
ผลักแผงที่อยู่ติดกันออกไป แต่ไม่ติดกัน
divorce (기본값)
ผลักแผงที่อยู่ติดกันออกไปและติดกัน แต่เมื่อกลับไปยังตำแหน่งที่เริ่มปรับขนาดจะถูกแยกออกอีกครั้ง
stalker
ติดกันอย่างสมบูรณ์ระหว่างแผงที่อยู่ติดกัน แต่เมื่อถึงจุดสิ้นสุดจะถูกแยกออกอีกครั้ง
การตรวจสอบครั้งสุดท้าย
layoutName / containerNameใช้สำหรับองค์ประกอบ DOM ที่เรนเดอร์แล้ว idและยังใช้ใน getLayoutInfos, useDecompositionLayout ใน Hook ต่างๆ เช่น Store/Subject ภายใน Keyใช้สำหรับ
ค่าต้องไม่ซ้ำกันในหน้า
Uniqueหากซ้ำกันจะทำให้ Key ภายในชนกัน ส่งผลให้เกิดการปรับขนาด/การสมัครสมาชิกที่ไม่ตั้งใจได้ค่าต้องเป็น
เสถียรหากเปลี่ยนแปลงในแต่ละการเรนเดอร์หรือเปลี่ยนชื่อขึ้นอยู่กับเงื่อนไข จะทำให้สถานะ/การสมัครสมาชิกเดิมขาดหายไปและอาจถูกมองว่าเป็น "เลย์เอาต์อื่น"หลีกเลี่ยงการใช้ช่องว่าง/อักขระพิเศษ และแนะนำให้ใช้ค่าเป็นภาษาอังกฤษ/ตัวเลขและ -, _
isResizePanelตัวระบุที่เกิดขึ้นเมื่อใช้งาน${ContainerName} + '_resize_panel'จะถูกสร้างขึ้นเพิ่มเติม รักษาชื่อของคอนเทนเนอร์ให้สอดคล้องและไม่ซ้ำกัน
isResizePanel
resize panel จะถูกเรนเดอร์เป็นพี่น้องของคอนเทนเนอร์
เช่น: ระหว่าง Mid และ Right, สิทธิ์การเป็นเจ้าของ resize panel อยู่ที่ Mid แต่ resize panel จะจัดการพี่น้องทั้งสองข้าง
grow
"ระบุ" อัตราส่วนเริ่มต้นของคอนเทนเนอร์เฉพาะ
คอนเทนเนอร์ที่ไม่ได้ระบุ grow จะได้รับการแจกจ่ายอย่างเท่าเทียมกัน ยกเว้น grow ที่ระบุไว้
isFitContent
จำกัดไม่ให้คอนเทนเนอร์ขยายใหญ่กว่าขนาดขององค์ประกอบลูกภายใน
panelMovementMode
ตั้งค่าวิธีการโต้ตอบระหว่างแผงเมื่อปรับขนาด
"bulldozer": ผลักแผงที่อยู่ติดกันออกไปแต่ไม่ติดกัน
"divorce": ผลักแผงที่อยู่ติดกันออกไปและติดกัน แต่เมื่อกลับมาจะแยกออก (ค่าเริ่มต้น)
"stalker": แผงที่อยู่ติดกันจะติดกันอย่างสมบูรณ์ แต่เมื่อถึงจุดสิ้นสุดจะถูกแยกออก