Prop aliases
Prop alias is a prop name shorthand that compiles into a single or multiple CSS properties.
This feature is designed for convenience and development speed. These props can be assigned to any component exposed by the library, including the area components generated from your composition template strings.
Each prop alias is associated with a single, or multiple corresponding CSS properties. See the list of all aliases and the corresponding CSS properties in the tables below.
Prop name | CSS property |
areas | |
template | |
templateCols | |
templateRows | |
gap | |
gapCol | |
gapRow | |
col | |
colStart | |
colEnd | |
row | |
rowStart | |
rowEnd | |
autoRows | |
autoCols | |
autoFlow |
Prop name | CSS property |
order | |
flexDirection | |
flexShrink | |
flexGrow | |
flexWrap | |
align | |
alignItems | |
alignContent | |
justify | |
justifyItems | |
justifyContent | |
place | place |
placeItems | |
placeContent |
Prop name | CSS property |
minHeight | min-height |
maxHeight | max-height |
height | height |
minWidth | min-width |
maxWidth | max-width |
width | width |
Prop name | CSS property |
margin | margin |
marginVertical | margin-top and margin-bottom |
marginHorizontal | margin-right and margin-left |
marginTop | margin-top |
marginRight | margin-right |
marginBottom | margin-bottom |
marginLeft | margin-left |
padding | padding |
paddingVertical | padding-top and padding-bottom |
paddingHorizontal | padding-right and padding-left |
paddingTop | padding-top |
paddingRight | padding-right |
paddingBottom | padding-bottom |
paddingLeft | padding-left |
Last modified 3yr ago