Layout toolkit
Fower provides a powerful Flexbox-based layout toolkit. By adjusting the direction and alignment of the layout, you can build most of the layout and make the layout easier.
Compared with the traditional flex layout, the layout of Fower is more abstract and streamlined. The layout of Fower is abstracted as toCenter
, toCenterX
, toCenterY
, toLeft
, toTop
, toRight
, toBottom
, toBetween
, toEvenly
, toAround
ten kinds of atomic alignment, you can forget the concept of main axis and cross axis in traditional flex layout when you use them, you only need to have a sense of direction.
#
Compare to FlexboxFower Layout base on Flexbox, Compare to Flexbox, it has several advantages:
- Less Api: You don't have to memorize all the APIs of Flexbox, just to remember 10 Atomic Props:
toCenter
、toCenterX
、toCenterY
、toLeft
、toTop
、toRight
、toBottom
、toBetween
、toEvenly
、toAround
. - Easy to learn: It's more intuitive,lower mental burden. No need to understand main axis and cross axis.
#
Core ConceptDirection:row、column
。
Alignment:toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom
、toBetween
、toEvenly
、toAround
。
#
Live DemoSyntaxError: Unexpected token (1:8) 1 : return () ^
#
Layout base on rowAll Alignment Props with row direction:
#
Layout base on columnAll Alignment Props with column direction:
#
Compose base on toLeftAll Layout compose with toLeft:
#
Compose base on toRightAll Layout compose with toRight:
#
Compose base on toTopAll Layout compose with toTop:
#
Compose base on toBottomAll Layout compose with toBottom:
#
Compose base on toCenterXAll Layout compose with toCenterX:
#
Compose base on toCenterYAll Layout compose with toCenterY:
#
Compose base on toBetweenAll Layout compose with toBetween:
#
Compose base on toEvenlyAll Layout compose with toEvenly:
#
Compose base on toAroundAll Layout compose with toAround: