Пять колонок

Пять областей в ряд шире экрана, читаются прокруткой вбок. Навигация слева не входит в их число — это область страницы, и она остается на месте.

Ряд прокручивается, страница — нет

`zone--split--scroll` помещает переполнение в ряд: колонки сохраняют свою заданную ширину, а раздел прокручивается под ними. Каждая из них все еще имеет собственное вертикальное переполнение, поэтому длинная колонка прокручивается там, где она стоит.

Каждая колонка задает свою ширину

Ничто не занимает оставшееся здесь пространство, поскольку его нет: ряд шире страницы намеренно. Область, которая не задает размер, отступает к колонке, широкой достаточно для чего-то, и они задают свои размеры — по 24rem каждая, всего пять.

Свертывание области

Каждая колонка здесь является `zone-collapsible`. В свернутом состоянии она не исчезает: сохраняет свое место в ряду и свою основу, а ее панель поворачивается на бок — так что кнопка, которая ее свернула, является кнопкой, которая ее открывает, и ничто внешнее не должно знать о ее существовании.

Названная область запоминается: состояние записывается в состояние интерфейса под ее именем и считывается обратно, когда страница загружается, так что она приходит свернутой, а не свертывается у вас на глазах. Третья колонка открывается свернутой, а последняя отображается с помощью vue — один и тот же компонент, одни и те же классы, один и тот же ключ.