Zone

Zone

Lo spazio di lavoro a due pannelli su cui è costruito ogni esploratore, editor e vista dettagliata. Una zona non ha larghezza né altezza proprie: è la suddivisione in cui si trova a determinarne le dimensioni, e ciascun lato scorre in modo indipendente. Due zone sono due oggetti posati sulla pagina, non un pannello diviso in due — ciò che le distingue è lo spazio tra di esse, e `zone--panel` è il terreno su cui ognuna si poggia.

Una suddivisione

Una colonna di dimensioni fisse, l'altra prende ciò che resta. La dimensione è data da un passaggio, ed è propria della zona — non viene ereditata da nulla di annidato al suo interno.
zone--narrow zone--size-6
zone

Questo lato prende ciò che la colonna di dimensioni fisse lascia.

Ciascun lato scorre in modo indipendente

Una zona scrollabile è ciò che contiene l'overflow, non la pagina. Scorri uno di questi due e l'altro rimane fermo, ed è proprio questa la ragione della forma.

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

Elemento 13

Elemento 14

Elemento 15

Elemento 16

Elemento 17

Elemento 18

Elemento 19

Elemento 20

Elemento 21

Elemento 22

Elemento 23

Elemento 24

Elemento 25

Elemento 26

Elemento 27

Elemento 28

Elemento 29

Elemento 30

Linea 1

Linea 2

Linea 3

Linea 4

Linea 5

Linea 6

Linea 7

Linea 8

Linea 9

Linea 10

Linea 11

Linea 12

Linea 13

Linea 14

Linea 15

Linea 16

Linea 17

Linea 18

Linea 19

Linea 20

Linea 21

Linea 22

Linea 23

Linea 24

Linea 25

Linea 26

Linea 27

Linea 28

Linea 29

Linea 30

Un'intestazione che non scorre

Una suddivisione verticale: una zona stretta è l'altezza di ciò che contiene, il corpo prende il resto e scorre sotto di essa. Questo è l'assetto di un pannello con una barra degli strumenti in cima.
zone--narrow

Linea 1

Linea 2

Linea 3

Linea 4

Linea 5

Linea 6

Linea 7

Linea 8

Linea 9

Linea 10

Linea 11

Linea 12

Linea 13

Linea 14

Linea 15

Linea 16

Linea 17

Linea 18

Linea 19

Linea 20

Linea 21

Linea 22

Linea 23

Linea 24

Linea 25

Linea 26

Linea 27

Linea 28

Linea 29

Linea 30

Sotto il minimo

Data una base, la zona flessibile occupa un'intera riga e la colonna di dimensioni fisse si sposta sopra di essa invece di essere entrambe costrette a nulla. Riduci la finestra per vedere come si piega.
zone--narrow
zone

Sotto il pavimento che questa zona riceve, occupa una propria riga.

Largo quanto il suo contenuto

`zone--fit-content`: la regione prende la larghezza di ciò che contiene — una tabella con molte colonne — piuttosto che ciò che le resta. La riga trabocca e scorre lateralmente come un'unica entità, con la sua barra di scorrimento in fondo al riquadro, non solo sotto la tabella; ogni regione continua a scorrere verso il basso autonomamente.

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

Elemento 13

Elemento 14

Elemento 15

Elemento 16

Elemento 17

Elemento 18

Elemento 19

Elemento 20

Elemento 21

Elemento 22

Elemento 23

Elemento 24

Elemento 25

Elemento 26

Elemento 27

Elemento 28

Elemento 29

Elemento 30

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

Accanto a una pagina

`zone--portrait`: mai più stretta di una pagina verticale (3:4) alta quanto la riga. Allargato a mano, il testo mantiene la sua larghezza e la riga scorre di lato invece di schiacciare la pagina.
zone--measure (--zone-size: 48rem)

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

v1.0.29