ห้าคอลัมน์

ห้าพื้นที่เรียงกันในแถวที่กว้างกว่าหน้าจอ สามารถอ่านได้โดยการเลื่อนข้าง การนำทางทางซ้ายไม่ใช่หนึ่งในนั้น — มันเป็นพื้นที่ของหน้า และมันจะอยู่ที่เดิม

แถวเลื่อน หน้าไม่เลื่อน

`zone--split--scroll` ทำให้การล้นอยู่ในแถว: คอลัมน์จะคงความกว้างตามที่ตั้งชื่อไว้และการเลื่อนจะแบ่งอยู่ใต้พวกมัน ทุกคอลัมน์ยังคงมีการล้นในแนวตั้งของตนเอง ดังนั้นคอลัมน์ยาวจะเลื่อนอยู่ที่ที่มันตั้งอยู่

ทุกคอลัมน์ตั้งชื่อความกว้างของมัน

ไม่มีอะไรใช้สิ่งที่เหลืออยู่ที่นี่ เนื่องจากไม่มี: แถวยาวกว่าหน้าโดยตั้งใจ พื้นที่ที่ไม่มีการตั้งขนาดจะกลับไปที่คอลัมน์ที่กว้างพอที่จะรองรับบางอย่าง และแต่ละคอลัมน์ตั้งชื่อความกว้างของตนเอง — 24rem ต่อคอลัมน์ ทั้งหมดห้าคอลัมน์

พับพื้นที่

ทุกคอลัมน์ที่นี่เป็น `zone-collapsible` เมื่อพับแล้ว มันจะไม่หายไป: มันจะรักษาตำแหน่งในแถวและพื้นที่ของมัน และแท่งของมันจะหมุนไปทางด้านข้าง — ดังนั้นปุ่มที่พับมันคือปุ่มที่เปิดมัน และไม่มีอะไรภายนอกต้องรู้ว่ามันมีอยู่

ชื่อพื้นที่จะถูกจดจำ: สถานะจะถูกเขียนลงในสถานะ UI ใต้ชื่อของมันและอ่านกลับเมื่อหน้าแสดงผล ดังนั้นมันจะมาถึงในสภาพพับแทนที่จะพับต่อหน้าคุณ คอลัมน์ที่สามเปิดในสภาพพับ และคอลัมน์สุดท้ายถูกเรนเดอร์โดย vue — คอมโพเนนต์เดียวกัน คลาสเดียวกัน คีย์เดียวกัน