ゾーン

ゾーン

すべてのエクスプローラー、エディター、詳細ビューが構築される二分割の作業スペースです。ゾーン自体には幅も高さもありません:それが置かれている分割によってサイズが決まり、各側面は独自にスクロールします。二つのゾーンはページ上に置かれた二つのオブジェクトであり、一つのパネルを半分に切ったものではありません — それらを区別するのは、その間のスペースであり、`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