Năm cột

Năm khu vực nằm cạnh nhau rộng hơn màn hình, đọc bằng cách cuộn ngang. Điều hướng bên trái không phải là một trong số đó - nó là một khu vực của trang, và nó giữ nguyên vị trí của nó.

Dòng cuộn, trang không cuộn

`zone--split--scroll` đặt phần tràn trên dòng: các cột giữ chiều rộng mà chúng chỉ định và phần tràn cuộn bên dưới chúng. Mỗi cột vẫn giữ phần tràn dọc riêng của nó, vì vậy một cột dài cuộn ở vị trí của nó.

Mỗi cột chỉ định chiều rộng của nó

Không có gì chiếm không gian còn lại ở đây, vì không có: dòng dài hơn trang một cách cố ý. Một khu vực không chỉ định kích thước sẽ quay lại một cột đủ rộng để chứa thứ gì đó, và những cột này chỉ định chiều rộng của chúng - mỗi cột 24rem, tổng cộng năm cột.

Gập một khu vực

Mỗi cột ở đây là một `zone-collapsible`. Khi gập lại, nó không biến mất: nó giữ vị trí trong dòng và mặt đất của nó, và thanh của nó quay sang một bên - vì vậy nút gập nó cũng là nút mở nó, và không có gì bên ngoài cần biết nó tồn tại.

Khi được đặt tên, một khu vực được ghi nhớ: trạng thái được ghi vào trạng thái ui dưới tên của nó và được đọc lại khi trang được phục vụ, vì vậy nó đến dưới dạng gập lại thay vì gập trước mắt bạn. Cột thứ ba mở ra dưới dạng gập lại, và cột cuối cùng được render bởi một vue - cùng thành phần, cùng lớp, cùng khóa.