五列

五个区域横排，宽于屏幕，通过横向滚动阅读。左侧的导航不是其中之一——它是页面的一个区域，保持原位。

行滚动，页面不滚动

`zone--split--scroll` 将溢出放在行上：列保持它们命名的宽度，分割在它们下面滚动。每个列仍然保持自己的垂直溢出，所以长列在原地滚动。

每列命名其宽度

这里没有其他东西占用剩余空间，因为故意让行比页面长。一个没有指定大小的区域退回到足够宽以容纳内容的列，而这些列各自命名——每个24rem，共五个。

折叠区域

这里的每一列都是一个 `zone-collapsible`。折叠后，它并不会消失：它保持在行中的位置和基础，且其条形横放——所以折叠它的按钮就是打开它的按钮，外部无需知道它的存在。

命名的区域被记住：状态被写入以其名称命名的用户界面状态中，并在页面服务时读回，因此它到达时是折叠的，而不是在你眼前折叠。第三列以折叠状态打开，最后一列由vue渲染——相同的组件，相同的类，相同的键。