Viisi saraketta

Viisi aluetta rivissä leveämpänä kuin näyttö, luettavissa sivuttain vierittämällä. Vasemmalla oleva navigointi ei ole yksi niistä — se on alue sivusta, ja se pysyy paikallaan.

Rivi vierittää, sivu ei

`zone--split--scroll` asettaa ylivuodon riville: sarakkeet pitävät nimettyä leveyttään ja jakautunut vieritys tapahtuu niiden alla. Jokaisella on edelleen oma pystysuuntainen ylivuotonsa, joten pitkä sarake vierittää paikallaan.

Jokainen sarake nimeää leveyden

Täällä ei ole mitään, mikä ottaisi sen, mitä on jäljellä: rivi on tarkoituksella pidempi kuin sivu. Alue, joka ei nimeä kokoa, palautuu riittävän leveään sarakkeeseen, ja nämä nimeävät omansa — 24rem kukin, viisi niistä.

Alueen taittaminen

Jokainen sarake täällä on `zone-collapsible`. Taitettuna se ei katoa: se pitää paikkansa rivissä ja maaperässään, ja sen palkki kääntyy sivulle — joten nappi, joka taittoi sen, on nappi, joka avaa sen, eikä ulkopuolisten tarvitse tietää sen olemassaolosta.

Nimettynä alue muistetaan: tila kirjoitetaan käyttöliittymän tilaan sen nimen alle ja luetaan takaisin, kun sivu toimitetaan, joten se saapuu taitettuna sen sijaan, että se taittuisi silmiesi edessä. Kolmas sarake avautuu taitettuna, ja viimeinen renderöidään vue:n avulla — sama komponentti, samat luokat, sama avain.