Strefy

Strefy

Dwupanelowe środowisko, na którym opiera się każdy widok eksploratora, edytora i szczegółów. Strefa nie ma własnej szerokości ani wysokości: to podział, w którym się znajduje, nadaje jej rozmiar, a każda strona przewija się osobno. Dwie strefy to dwa obiekty ułożone na stronie, a nie jeden panel przecięty na pół — tym, co je odróżnia, jest przestrzeń między nimi, a `zone--panel` to podstawa, na której każda z nich stoi.

Podział

Jedna kolumna o danym rozmiarze, druga zajmująca to, co zostało. Rozmiar jest określony przez krok i jest to rozmiar samej strefy — nie jest dziedziczony przez nic, co jest w niej zagnieżdżone.
zone--narrow zone--size-6
zone

Ta strona bierze to, co zostawia kolumna o danym rozmiarze.

Każda strona przewija się osobno

Przewijalna strefa to ta, która przechowuje nadmiar, a nie strona. Przewiń jedną z tych dwóch, a druga zostaje na swoim miejscu, co jest głównym powodem tego kształtu.

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

Element 13

Element 14

Element 15

Element 16

Element 17

Element 18

Element 19

Element 20

Element 21

Element 22

Element 23

Element 24

Element 25

Element 26

Element 27

Element 28

Element 29

Element 30

Linia 1

Linia 2

Linia 3

Linia 4

Linia 5

Linia 6

Linia 7

Linia 8

Linia 9

Linia 10

Linia 11

Linia 12

Linia 13

Linia 14

Linia 15

Linia 16

Linia 17

Linia 18

Linia 19

Linia 20

Linia 21

Linia 22

Linia 23

Linia 24

Linia 25

Linia 26

Linia 27

Linia 28

Linia 29

Linia 30

Nagłówek, który się nie przewija

Podział w orientacji pionowej: wąska strefa ma wysokość tego, co zawiera, a ciało zajmuje resztę i przewija się pod nią. To układ panelu z paskiem narzędzi na górze.
zone--narrow

Linia 1

Linia 2

Linia 3

Linia 4

Linia 5

Linia 6

Linia 7

Linia 8

Linia 9

Linia 10

Linia 11

Linia 12

Linia 13

Linia 14

Linia 15

Linia 16

Linia 17

Linia 18

Linia 19

Linia 20

Linia 21

Linia 22

Linia 23

Linia 24

Linia 25

Linia 26

Linia 27

Linia 28

Linia 29

Linia 30

Poniżej minimum

Majac podłogę, elastyczna strefa zajmuje pełną linię, a kolumna o danym rozmiarze przesuwa się nad nią, zamiast obie być ściśnięte do zera. Zmniejsz okno, aby zobaczyć, jak się składa.
zone--narrow
zone

Poniżej podłogi, którą ma ta strefa, zajmuje własną linię.

Tak szeroka jak jej zawartość

`zone--fit-content`: obszar zajmuje szerokość tego, co zawiera — tabela z wieloma kolumnami — zamiast tego, co jest mu przydzielone. Wiersz przeskakuje i przewija się na boki jako całość, jego pasek przewijania znajduje się u dołu ramki, a nie tylko pod tabelą; każdy obszar nadal przewija się w dół samodzielnie.

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

Element 13

Element 14

Element 15

Element 16

Element 17

Element 18

Element 19

Element 20

Element 21

Element 22

Element 23

Element 24

Element 25

Element 26

Element 27

Element 28

Element 29

Element 30

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

Obok strony

`zone--portrait`: nigdy węższa niż strona pionowa (3:4) o wysokości wiersza. Poszerzony ręcznie tekst zachowuje szerokość, a wiersz przewija się w bok zamiast ściskać stronę.
zone--measure (--zone-size: 48rem)

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

v1.0.29