ภาพรวม
Resizable split panels + Drag & Drop dynamic splits สำหรับ React
@byeolnaerim/flex-layoutเป็นคอมโพเนนต์ React ที่ช่วยในการสร้าง UI แผงแบ่งที่ปรับขนาดได้และการแบ่งแบบไดนามิกที่ใช้ Drag & Drop ได้อย่างรวดเร็ว.
ตัวอย่างเช่น หากมีความต้องการในการจัดเรียงหน้าจอที่ด้านซ้ายเป็นมุมมองรายการสินค้าของร้านค้า และด้านขวาเป็นมุมมองการแสดงตัวอย่างการสวมใส่จริง และแต่ละมุมมองต้องสามารถปรับขนาดได้ ไลบรารีนี้สามารถให้แนวคิดที่ดีได้.
เรื่องราวต้นกำเนิด
ครั้งแรกของ @byeolnaerim/flex-layoutเกิดขึ้นเมื่อผมเป็นนักพัฒนาปีที่ 2 และพยายามสร้างแอปพลิเคชันแชทสำหรับธุรกิจที่ใช้ vanilla js เป็นโปรเจกต์ส่วนตัว.
ผมต้องการให้มันสามารถปรับขนาดระหว่างกันได้เหมือนกับ Slack หรือ vscode. สำหรับผม การจัดเรียงมุมมองด้านซ้ายของ vscode ดูดีมาก ดังนั้นผมจึงต้องการให้สิ่งที่ผมสร้างทำงานได้คล้ายกับ vscode.
เมื่อเวลาผ่านไป ผมเริ่มเรียนรู้ React และสร้างสิ่งนี้ใหม่ด้วยคอมโพเนนต์ที่ใช้ typescript, rxjs, react. จากฟังก์ชันมุมมองแบ่งที่มีอยู่ซึ่งสามารถปรับขนาดได้ด้วยการลาก ผมได้ขยายฟังก์ชันการสร้างมุมมองแบ่งแบบไดนามิกด้วย Drag & Drop เพื่อให้ทำงานได้คล้ายกับ vscode.
การปรับขนาดการเติบโต
@byeolnaerim/flex-layoutเมื่อครั้งแรกที่สร้าง ผมเข้าใจว่า flex-grow เป็นการจัดเรียงของเลย์เอาต์หลักFlexLayout โดยใช้จำนวนของคอนเทนเนอร์ลูกเป็นขีดจำกัดสูงสุดของการเติบโตทั้งหมดFlexLayoutContainer และต้องทำการปรับสัดส่วนของแต่ละคอนเทนเนอร์ภายในนั้นmaxGrow, เพื่อให้เข้าใจว่าเป็นแนวคิดในการจัดสรร.normalize(นี่เป็นการตีความที่ผิด.)
ตัวอย่างเช่น หากมีคอนเทนเนอร์ลูก 2 ตัว max grow คือ 2 และอัตราส่วน 30% / 70% จะต้องมีการเติบโตจริงที่ 0.668 / 1.332 ซึ่งเป็นสมมติฐานที่ทำให้เกิดตรรกะการปรับแต่งจนกลายเป็นปัจจุบันนี้@byeolnaerim/flex-layoutกลายเป็นเช่นนี้แล้ว.