Layout
How to use ?
Static styles provided by the static/layout.ts file assist in applying layout styles to your components.
You can access these styles using the following code:
const { layout } = useTheme()
Default generated layout
| Key | Value |
|---|---|
| col | {"flexDirection":"column"} |
| colReverse | {"flexDirection":"column-reverse"} |
| itemsCenter | {"alignItems":"center"} |
| itemsEnd | {"alignItems":"flex-end"} |
| itemsStart | {"alignItems":"flex-start"} |
| itemsStretch | {"alignItems":"stretch"} |
| justifyAround | {"justifyContent":"space-around"} |
| justifyBetween | {"justifyContent":"space-between"} |
| justifyCenter | {"justifyContent":"center"} |
| justifyEnd | {"justifyContent":"flex-end"} |
| justifyStart | {"justifyContent":"flex-start"} |
| row | {"flexDirection":"row"} |
| rowReverse | {"flexDirection":"row-reverse"} |
| wrap | {"flexWrap":"wrap"} |
| flex_1 | {"flex":1} |
| fullHeight | {"height":"100%"} |
| fullWidth | {"width":"100%"} |
| absolute | {"position":"absolute"} |
| bottom0 | {"bottom":0} |
| left0 | {"left":0} |
| relative | {"position":"relative"} |
| right0 | {"right":0} |
| top0 | {"top":0} |
| z1 | {"zIndex":1} |
| z10 | {"zIndex":10} |
info
These styles are generated using the static/layout.ts file. You can modify the file to change the default styles.