영역

영역

모든 탐색기, 편집기 및 세부 정보 뷰가 구축된 두 개의 창으로 이루어진 작업 공간입니다. 영역은 자체적인 너비와 높이를 가지지 않으며, 그 위치한 분할이 크기를 결정하고 각 측면은 독립적으로 스크롤됩니다. 두 개의 영역은 페이지에 놓인 두 개의 객체이며, 반으로 나누어진 하나의 패널이 아닙니다. 그들을 구별하는 것은 그들 사이의 공간이며, `zone--panel`은 각자가 서 있는 기반입니다.

분할

하나는 크기가 정해진 열이고, 다른 하나는 남은 공간을 차지합니다. 크기는 단계에 의해 정해지며, 이는 영역 자체의 것입니다 — 내부에 중첩된 어떤 것도 이를 상속받지 않습니다.
zone--narrow zone--size-6
zone

이 측면은 크기가 정해진 열이 남긴 것을 차지합니다.

각 측면은 독립적으로 스크롤됩니다

스크롤 가능한 영역은 넘침을 보유하는 것이며, 페이지가 아닙니다. 이 두 개 중 하나를 스크롤하면 다른 하나는 있는 자리에 그대로 있으며, 이것이 형태의 전부 이유입니다.

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

항목 21

항목 22

항목 23

항목 24

항목 25

항목 26

항목 27

항목 28

항목 29

항목 30

줄 1

줄 2

줄 3

줄 4

줄 5

줄 6

줄 7

줄 8

줄 9

줄 10

줄 11

줄 12

줄 13

줄 14

줄 15

줄 16

줄 17

줄 18

줄 19

줄 20

줄 21

줄 22

줄 23

줄 24

줄 25

줄 26

줄 27

줄 28

줄 29

줄 30

스크롤되지 않는 헤더

수직으로 변환된 분할: 좁은 영역은 그 안에 담고 있는 것의 높이이며, 본체는 나머지를 차지하고 그 아래에서 스크롤됩니다. 이는 상단에 도구 모음이 있는 패널의 배열입니다.
zone--narrow

줄 1

줄 2

줄 3

줄 4

줄 5

줄 6

줄 7

줄 8

줄 9

줄 10

줄 11

줄 12

줄 13

줄 14

줄 15

줄 16

줄 17

줄 18

줄 19

줄 20

줄 21

줄 22

줄 23

줄 24

줄 25

줄 26

줄 27

줄 28

줄 29

줄 30

최소 크기 미만

바닥이 주어지면, 유연한 영역은 전체 줄을 차지하고 크기가 정해진 열은 두 개가 압축되어 사라지지 않고 그 위로 이동합니다. 창을 좁혀서 접히는 모습을 확인하세요.
zone--narrow
zone

이 영역에 주어진 바닥 아래에서, 자신의 줄을 차지합니다.

내용에 맞게 넓게

`zone--fit-content`: 이 영역은 자신이 포함하는 것의 너비 — 여러 열의 테이블 — 를 따라 넓어지고, 남는 공간으로 넓어지지 않습니다. 행은 하나로서 넘치고 가로로 스크롤되며, 스크롤바는 프레임의 하단에 위치하고 테이블 아래에만 있지 않습니다; 각 영역은 여전히 개별적으로 아래로 스크롤됩니다.

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

항목 13

항목 14

항목 15

항목 16

항목 17

항목 18

항목 19

항목 20

항목 21

항목 22

항목 23

항목 24

항목 25

항목 26

항목 27

항목 28

항목 29

항목 30

zone--fit-content
열 1열 2열 3열 4열 5열 6열 7열 8열 9열 10
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg

페이지 옆에

`zone--portrait`: 행 높이의 세로 페이지(3:4)보다 좁아지지 않습니다. 손으로 넓힌 텍스트는 너비를 유지하고, 행은 페이지를 누르는 대신 옆으로 스크롤됩니다.
zone--measure (--zone-size: 48rem)

항목 1

항목 2

항목 3

항목 4

항목 5

항목 6

항목 7

항목 8

항목 9

항목 10

항목 11

항목 12

v1.0.29