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 Flexbox#
Fower 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 Concept#
Direction：row、column。
Alignment：toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround。
Live Demo#
SyntaxError: Unexpected token (1:8)
1 : return ()
^Layout base on row#
All Alignment Props with row direction:
Layout base on column#
All Alignment Props with column direction:
Compose base on toLeft#
All Layout compose with toLeft:
Compose base on toRight#
All Layout compose with toRight:
Compose base on toTop#
All Layout compose with toTop:
Compose base on toBottom#
All Layout compose with toBottom:
Compose base on toCenterX#
All Layout compose with toCenterX:
Compose base on toCenterY#
All Layout compose with toCenterY:
Compose base on toBetween#
All Layout compose with toBetween:
Compose base on toEvenly#
All Layout compose with toEvenly:
Compose base on toAround#
All Layout compose with toAround: