خمسة أعمدة

خمسة مناطق في صف أوسع من الشاشة، تُقرأ بالتمرير أفقيًا. التنقل على اليسار ليس واحدًا منها - إنه منطقة من الصفحة، ويظل في مكانه.

الصف يتم التمرير، الصفحة لا

`zone--split--scroll` يضع التدفق على الصف: الأعمدة تحتفظ بعرضها المحدد والتقسيم يتم التمرير تحتها. كل واحدة لا تزال تحمل تدفقها العمودي الخاص، لذا العمود الطويل يتم التمرير حيث يقف.

كل عمود يحدد عرضه

لا شيء يأخذ ما تبقى هنا، لأنه لا يوجد: الصف أطول من الصفحة عن قصد. منطقة لا تحدد حجمًا تعود إلى عمود واسع بما يكفي ليحتوي شيئًا، وهذه تحدد أحجامها - 24rem لكل منها، خمسة منهم.

طي منطقة

كل عمود هنا هو `zone-collapsible`. عند طيه، لا يختفي: يحتفظ بمكانه في الصف وأرضه، وشريطه يتحول على جانبه - لذا الزر الذي طواه هو الزر الذي يفتحه، ولا يتعين على أي شيء خارجي أن يعرف بوجوده.

عند التسمية، يتم تذكر المنطقة: الحالة تُكتب إلى حالة واجهة المستخدم تحت اسمها وتُقرأ مرة أخرى عند تقديم الصفحة، لذا تصل مطوية بدلاً من الطي أمام عينيك. العمود الثالث يفتح مطويًا، والعمود الأخير يتم تقديمه بواسطة vue - نفس المكون، نفس الفئات، نفس المفتاح.