다섯 개의 열

화면보다 넓은 다섯 개의 영역이 가로로 배열되어 있으며, 옆으로 스크롤하여 읽습니다. 왼쪽의 내비게이션은 그 중 하나가 아닙니다 — 페이지의 영역이며, 그 자리에 그대로 있습니다.

행은 스크롤되고, 페이지는 스크롤되지 않습니다

`zone--split--scroll`은 행에 오버플로우를 적용합니다: 열은 자신이 설정한 너비를 유지하고, 분할은 그 아래에서 스크롤됩니다. 각 열은 여전히 자신의 수직 오버플로우를 가지고 있으므로, 긴 열은 그 자리에 있던 곳에서 스크롤됩니다.

모든 열은 자신의 너비를 설정합니다

여기에는 남는 것이 없습니다: 행이 페이지보다 길도록 의도된 것입니다. 크기를 지정하지 않은 영역은 무언가를 담을 수 있을 만큼 넓은 열로 돌아가며, 이들은 각각 자신의 너비를 설정합니다 — 각 24rem, 총 다섯 개입니다.

영역 접기

여기 있는 모든 열은 `zone-collapsible`입니다. 접히면 사라지지 않고: 행에서 자신의 위치와 기초를 유지하며, 바는 옆으로 돌아갑니다 — 따라서 접는 버튼이 여는 버튼이 되고, 외부에서는 그것이 존재하는지 알 필요가 없습니다.

이름이 있는 영역은 기억됩니다: 상태는 해당 이름 아래 UI 상태에 기록되고, 페이지가 제공될 때 다시 읽혀지므로, 눈앞에서 접히기보다는 접힌 상태로 도착합니다. 세 번째 열은 접힌 상태로 열리고, 마지막 열은 vue로 렌더링됩니다 — 같은 컴포넌트, 같은 클래스, 같은 키입니다.