Layouts and properties - tremho/thunderbolt-common GitHub Wiki

A StackLayout may be declared as either 'horizontal' or 'vertical' orientation. default orientation is vertical.

A StackLayout can have elements aligned within itself.

StackLayout is modeled after the StackLayout of Nativescript. Think of it like a <div> or a <span> section in classic web design.

• Horizontal stacks require an explicit height or they will not appear (in mobile). (Possible TODO: apply a default height:0 to riot implementation to mimic this limitation and avoid cross-platform confusion?)

• A horizontal stack element will act as align=stretch by default in {N} and align=top in riot. (Possible TODO: apply a default verticalAlignment: top to {N} implementation)

• orientation -- horizontal or vertical

• align or alignment -- left, right, center, top, bottom, middle (use the values appropriate to the orientation)

The FlexLayout is based on the Flexbox CSS concept, and the Nativescript FlexboxLayout container. Please see documentation for Flexbox and FlexboxLayout

In Mobile, certain items may assume a 'stretch' appearance by default where they do not for desktop.
Some features, such as the use of 'flexFlow' and 'space-evenly' will work for desktop, but fail under Nativescript.

• flexDirection -- row or column. A horizontal flex layout uses row, a vertical layout uses column
• flexWrap -- nowrap(default), wrap, wrap-reverse
• justifyContent -- flex-start, flex-end, center, space-around, space-between Note that "space-evenly" is also supported for desktop only but will throw an error under Nativescript.
• alignItems -- flex-start, flex-end, center, baseline, stretch
• alignContent -- flex-start, flex-end, center, space-around, space-between, stretch

Note that flexFlow shorthand is not supported, although it will work locally for desktop mode.

• order - ordinal number of position in group
• flexGrow - relative amount this child is allowed to grow to fill space compared to siblings
• flexShrink - relative amount this child is allowed to shrink to allow group to fit space compared to siblings
• alignSelf - exception to the container's 'alignContent' setting (if any) for this child, forcing this child to align its own way.

Implements a grid layout with most grid-like features, albeit with some modified syntax in some cases

Note that the 'independent positioning context' test doesn't work on Android because a) only left and top are available for {N} and they don't apply here because they only work on an AbsoluteLayout. It's possible to achieve this type of effect in {N} but it is done quite differently and needs to be done post-migration or with a custom component. Interestingly, it is behaving as expected under iOS, so the implementation there appears to be closer to the CSS spec to start with.

columns | gridTemplateColumns

• Defines a series of column widths separated by space. Widths may be in units (e.g. 100px), or the keyword auto (column finds its own size based on content), or a 'free-space' expression. A free-space expression is a number followed by either the letters fr or the * character (* and fr are synonymous and interchangeable). An instance of fr or * without a preceding number is equivalent to 1*. Free-space expressions can be understood as taking the free space left after sizing other columns then dividing this by the number of free-space expressions to get an even distribution, then multiplying this even distribution amount by the number associated with each expression to get the resulting width for each space.
  Example use of columns: columns="auto 200px * 2* *". Defines 4 columns of various sizes.
  

See the MDN reference for grid-template-columns for more information.

• Note that the keyword options min-content, max-content, minmax(...), fit-content(...), masonry and subgrid are not supported.

However, repeat(<count>, <expr>) is allowed, as in columns="repeat(4, 100px *)" (but only for gridTemplateColumns, not the columns synonym)

rows | gridTemplateRows

• Defines a series of row height definitions separated by space. Heights may be units (e.g. 100px), or the keyword auto (row finds its own size based on content). , or a 'free-space' expression. A free-space expression is a number followed by either the letters fr or the * character (* and fr are synonymous and interchangeable). An instance of fr or * without a preceding number is equivalent to 1*. Free-space expressions can be understood as taking the free space left after sizing other rows then dividing this by the number of free-space expressions to get an even distribution, then multiplying this even distribution amount by the number associated with each expression to get the resulting width for each space.
  Example use of rows: rows="auto 200px * 2* *". Defines 4 rows of various sizes.
  

See the MDN reference for grid-template-rows for more information.

• Note that the keyword options none, [linename], min-content, max-content, minmax(...), fit-content(...), masonry and subgrid are not supported.

However, repeat(<count>, <expr>) is allowed, as in rows="repeat(4, *)" (but only for gridTemplateRows, not the rows synonym)

The CSS grid specification defines grid-template-areas as a block of grid area names arranged in a multi-line string. Thunderbolt supports this, but the css syntax for defining the grid is altered to allow a definition via XML. Lines are separated by a / character. That is, the block:

a b c
d e f

would be represented as areas="a b c/d e f".

• areas | gridTemplateAreas - both of these work the same to supply the definition block using the '/' character to denote line breaks, as noted above

• gap | gridGap - Defines the margin to be placed around grid cells.

Note: The rows declared by areas are the same as if they had been declared as auto. The CSS grid-template property, an all-in-one block declaration that combines elements of GridTemplateAreas with specifics for row properties, is not supported by Thunderbolt. If you need specifics, you must use 'columns' and 'rows' declarations and forego the use of named areas.

Note: CSS-standard features grid-auto-columns, grid-auto-rows, and grid-auto-flow are not supported. Behavior of the implicit grid areas outside of the explicit grid remains unexplored.

The direct children of GridLayout can specify their location within the grid using the col, row, colSpan, rowSpanand/orgridArea` properties.

One may also use the css-standard grid-column-start, grid-column-end, grid-row-start, grid-row-end properties for this purpose.

Note that grid-column-start, grid-column-end, grid-row-start, grid-row-end are 1-based, whereas col and row are 0-based.

Negative values (to index from end) are not supported as they are in true CSS.

• col - 0-based index of the target column in a grid, or if used in conjunction with gridArea, the offset from the start of the named area.
• row - 0-based index of the target column in a grid, or if used in conjunction with gridArea, the offset from the start of the named area.
• colSpan - number of columns in the grid this target definition should span. Values < 1 are invalid.
• rowSpan - number of rows in the grid this target definition should span. Values < 1 are invalid.
• gridArea - name of grid area as defined by gridTemplateAreas. Used alone, this will target the entirety of columns and rows in the definition. Used in conjunction with col and row offsets, the target will be the first named column/row offset by these amounts, and the
• colSpan/rowSpan properties can then define any additional adjacent inclusion.