पाँच कॉलम

पाँच क्षेत्र एक पंक्ति में स्क्रीन से चौड़े होते हैं, जिन्हें बाईं ओर स्क्रॉल करके पढ़ा जाता है। बाईं ओर की नेविगेशन उनमें से नहीं है - यह पृष्ठ का एक क्षेत्र है, और यह अपनी जगह पर रहता है।

पंक्ति स्क्रॉल होती है, पृष्ठ नहीं

`zone--split--scroll` पंक्ति पर ओवरफ़्लो डालता है: कॉलम अपनी नामित चौड़ाई रखते हैं और विभाजन उनके नीचे स्क्रॉल होता है। प्रत्येक में अभी भी अपनी लंबवत ओवरफ़्लो होती है, इसलिए एक लंबा कॉलम वहीं स्क्रॉल होता है जहाँ वह खड़ा है।

हर कॉलम अपनी चौड़ाई बताता है

यहाँ कुछ भी नहीं है जो बाकी लेता है, क्योंकि यहाँ कुछ नहीं है: पंक्ति जानबूझकर पृष्ठ से लंबी है। एक क्षेत्र जो आकार नहीं बताता, एक कॉलम में वापस गिरता है जो कुछ रखने के लिए पर्याप्त चौड़ा होता है, और ये अपनी चौड़ाई बताते हैं - प्रत्येक 24rem, उनमें से पाँच।

एक क्षेत्र को मोड़ना

यहाँ हर कॉलम एक `zone-collapsible` है। मोड़े जाने पर, यह नहीं जाता: यह पंक्ति में अपनी जगह और जमीन बनाए रखता है, और इसकी पट्टी अपनी ओर मुड़ जाती है - इसलिए बटन जो इसे मोड़ता है वही बटन है जो इसे खोलता है, और बाहर कुछ भी जानने की जरूरत नहीं है कि यह मौजूद है।

नामित होने पर, एक क्षेत्र याद रखा जाता है: स्थिति इसे नाम के तहत ui स्थिति में लिखी जाती है और जब पृष्ठ परोसता है तो वापस पढ़ी जाती है, इसलिए यह आपकी आंखों के सामने मोड़ने के बजाय मोड़ा हुआ आता है। तीसरा कॉलम मोड़ा हुआ खुलता है, और अंतिम एक vue द्वारा प्रस्तुत किया जाता है - वही घटक, वही वर्ग, वही कुंजी।