Zonas

Zonas

O espaço de trabalho em duas painéis em que cada explorador, editor e visualização de detalhes é construído. Uma zona não tem largura e altura próprias: o espaço em que está determina seu tamanho, e cada lado rola de forma independente. Duas zonas são dois objetos dispostos na página, não um painel cortado ao meio — o que as diferencia é o espaço entre elas, e `zone--panel` é o chão em que cada uma se apoia.

Uma divisão

Uma coluna dimensionada, a outra ocupando o que resta. O tamanho é dado por um passo, e é próprio da zona — não é herdado por nada que esteja aninhado dentro dela.
zone--narrow zone--size-6
zone

Este lado ocupa o que a coluna dimensionada deixa.

Cada lado rola de forma independente

Uma zona rolável é o que mantém o transbordo, não a página. Role uma dessas duas e a outra permanece onde está, que é a razão principal para a forma.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Linha 1

Linha 2

Linha 3

Linha 4

Linha 5

Linha 6

Linha 7

Linha 8

Linha 9

Linha 10

Linha 11

Linha 12

Linha 13

Linha 14

Linha 15

Linha 16

Linha 17

Linha 18

Linha 19

Linha 20

Linha 21

Linha 22

Linha 23

Linha 24

Linha 25

Linha 26

Linha 27

Linha 28

Linha 29

Linha 30

Um cabeçalho que não rola

Uma divisão transformada em vertical: uma zona estreita tem a altura do que abriga, o corpo ocupa o restante e rola abaixo dela. Esta é a disposição de um painel com uma barra de ferramentas na parte superior.
zone--narrow

Linha 1

Linha 2

Linha 3

Linha 4

Linha 5

Linha 6

Linha 7

Linha 8

Linha 9

Linha 10

Linha 11

Linha 12

Linha 13

Linha 14

Linha 15

Linha 16

Linha 17

Linha 18

Linha 19

Linha 20

Linha 21

Linha 22

Linha 23

Linha 24

Linha 25

Linha 26

Linha 27

Linha 28

Linha 29

Linha 30

Abaixo do mínimo

Dado um chão, a zona flexível ocupa uma linha completa e a coluna dimensionada se move acima dela em vez de ambas serem espremidas a nada. Reduza a janela para vê-la se dobrar.
zone--narrow
zone

Abaixo do chão que esta zona recebe, ela ocupa uma linha própria.

Tão largo quanto seu conteúdo

`zone--fit-content`: a região ocupa a largura do que contém — uma tabela com muitas colunas — em vez do que lhe resta. A linha transborda e rola para o lado como um todo, sua barra de rolagem na parte inferior do quadro, não apenas sob a tabela; cada região ainda rola para baixo por conta própria.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

zone--fit-content
Coluna 1Coluna 2Coluna 3Coluna 4Coluna 5Coluna 6Coluna 7Coluna 8Coluna 9Coluna 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

Ao lado de uma página

`zone--portrait`: nunca mais estreita que uma página em retrato (3:4) da altura da linha. Alargado à mão, o texto mantém a largura e a linha rola para o lado em vez de espremer a página.
zone--measure (--zone-size: 48rem)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

v1.0.29