Splitter แบ่งพื้นที่ให้พาเนลต่าง ๆ โดยมีที่จับคั่นอยู่ระหว่างพาเนลทุกคู่ที่อยู่ติดกัน ลากที่จับ หรือย้ายโฟกัสไปยังที่จับแล้วใช้ปุ่มลูกศร ขนาดเป็นเปอร์เซ็นต์ที่รวมกันได้ 100 และผูกค่าได้ด้วย [(sizes)]
แต่ละพาเนลกำหนดขนาดเริ่มต้น ขนาดต่ำสุด และขนาดสูงสุดเป็นพิกเซล rem หรือเปอร์เซ็นต์ก็ได้ พาเนลที่เป็น collapsible จะพับเก็บเมื่อถูกลากจนเล็กกว่าครึ่งหนึ่งของขนาดต่ำสุด หรือเมื่อกด Enter บนที่จับ และจะกลับมาด้วยขนาดเดิมก่อนพับเก็บ
เมื่อใช้ storageKey ขนาดจะถูกเก็บไว้ใน localStorage ผู้ใช้จึงเห็นเลย์เอาต์แบบเดียวกับที่ทิ้งไว้เมื่อกลับมาครั้งถัดไป
ตัวแก้ไขโค้ด
ไฟล์ โค้ด และตัวอย่างผลลัพธ์ พาเนลไฟล์และตัวอย่างผลลัพธ์พับเก็บได้ พาเนลโค้ดกว้างอย่างน้อย 30% เสมอ และขนาดจะถูกบันทึกไว้
export class App {}
// app.ts
พาเนลที่ซ้อนกัน
orientation="vertical" วางพาเนลซ้อนกันในแนวตั้ง และ [(sizes)] อ่านขนาดของพาเนลขณะที่ขนาดเปลี่ยนไป
SELECT name, total FROM orders
3 rows
Sizes: 65% and 35%