rowLayout
Examples
kind: RowLayout
heights:
- 100px
- auto
areas:
- my-header
- my-viewer
Object properties
Name |
Type |
Required |
kind |
Constant: RowLayout |
yes |
heights |
Array |
yes |
areas |
Array |
yes |
- Object with the following properties:
kind
(required): Constant RowLayout
- Place content areas in a vertical array
heights
(required):
- The heights of the rows
- Array of:
string
- A grid size is a definition of distance either in an absolute, relative or flexible way the following grid sizes are allowed: - px: An absolute size in pixels, this will force it to be this exact value (Example: 12px) - em: An size relative to the parents font-size, this will force it to be this exact (calculated) pixel value (Example: 1.0em) - rem: An size relative to the root html font-size, this will force it to be this exact (calculated) pixel value (Example: 0.8re) - %: A size relative to the size of it’s parent expressed as a percentage of the parent (Example: 10%) - auto: A magic keyword to let the browser figure out what the size should be, this usually results in some value that mimicks other auto values in the same direction and makes sure the content fits, it can however vary strongly between browsers (Example: auto) - fr: A fraction of the total left over space in the parent. With left over is meant the space that is left after, %, px, em, rem and auto space has been filled in. (Example: 1fr)
areas
(required):
- The content names to place in the rows of the layout
- Array of:
string
- A grid area refers to the key in the contents mapping