Open triniwiz opened 1 year ago
Many names for the layout have been suggested. I am going to list them here.
<Flex/>
<Grid/>
<Container/>
I would suggest creating 3 base elements for layout. Flex
, Grid
& Container
. The Container
can be styled as both grid/flex as needed while Flex
& Grid
follow their respective layouts. This will give a clear understanding of layout at a glance.
However Container
is usually used as something that wraps your app/screen. So <Flex/>
& <Grid/>
alone do great.
https://theme-ui.com/components/flex
https://theme-ui.com/components/grid
Druid also uses Flex
as a layout primitive.
With taffy's roadmap mentioning support for more layout algorithms in future, it makes sense to think of this more broadly. For example Morphorm
layout has three base node, Row
, Column
and Grid
<Row/>
<Column/>
This can in future fit well with the above, Flex, Grid, Container combo where Grid can be switched between css/morphorm grid.
With TableLayout
<Table/>
And
<HStack/>
<VStack/>
<ZStack/>
#
<Box/>
This is also a great option. Short & Concise. Already used by many web UI libraries in their design systems. However it's function varies from what we want here. For example https://theme-ui.com/components/box defined box as Use the Box component as a layout primitive to add margin, padding, and colors to content.
.
<DivLayout/>
If we want to stick to the nativescript way of naming layouts, this seems most suitable I think.
<div/>
Since mason & taffy both want to follow the web specification for flex & grid, just calling it a div
is another great option.
And here's a list of other name suggestions that were discussed upon:
<TriniDiv/>
<Layout/>
<FlexLayout/>
<Section/>
<DiView/>
<MasonView/>
<Block/>
<Structure/>
<StyledView/>
<LayoutView/>
<FlexView/>
<GridView/>
<Mason/>
<NSDiv/>
These look pretty sweet
<Flex/>
<Grid/>
<Container/>
Tests WIP here: https://github.com/herefishyfish/nativescript-mason