Pięć kolumn

Pięć obszarów w jednym rzędzie, szerszych niż ekran, przeglądanych przez przewijanie w poziomie. Nawigacja po lewej stronie nie jest jednym z nich — to obszar strony, który pozostaje na swoim miejscu.

Rząd przewija się, strona nie

`zone--split--scroll` umieszcza nadmiar w rzędzie: kolumny zachowują szerokość, którą zadeklarowały, a przewijanie pod nimi. Każda z nich wciąż ma własny pionowy nadmiar, więc długa kolumna przewija się tam, gdzie stoi.

Każda kolumna określa swoją szerokość

Nic nie zajmuje tego, co tutaj zostało, ponieważ nic nie ma: rząd jest celowo dłuższy niż strona. Obszar, który nie określa rozmiaru, wraca do kolumny szerokiej na tyle, by coś pomieścić, a te określają swoje — po 24rem każda, pięć z nich.

Złożenie obszaru

Każda kolumna tutaj to `zone-collapsible`. Złożona, nie znika: zachowuje swoje miejsce w rzędzie i swoją przestrzeń, a jej pasek obraca się na bok — więc przycisk, który ją złożył, jest przyciskiem, który ją otwiera, a nic na zewnątrz nie musi wiedzieć, że istnieje.

Nazwana, przestrzeń jest zapamiętywana: stan jest zapisywany w stanie ui pod swoją nazwą i odczytywany, gdy strona jest serwowana, więc przychodzi złożona zamiast składać się przed twoimi oczami. Trzecia kolumna otwiera się złożona, a ostatnia jest renderowana przez vue — ten sam komponent, te same klasy, ten sam klucz.