Зоны

Зоны

Рабочее пространство с двумя панелями, на основе которого построены все обозреватели, редакторы и детализированные представления. Зона не имеет собственной ширины и высоты: размер определяется разделением, в котором она находится, и каждая сторона прокручивается отдельно. Две зоны — это два объекта, расположенные на странице, а не одна панель, разрезанная пополам — отличает их пространство между собой, а `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