Spacings
一个应用，元素的间距应该是有规律的，不应该是随意杂乱的，一致的间距可以提高 UI 的设计质量，让用户感受到产品的专业性。 Fower 默认的布局的间距已 4px 为基本单位，所有间距为 4px 的倍数，建议所有的组件和文字排版都使用这些有规律的间距。
配置#
Fower 默认以 4px 作为间距单元，当然你可以配置自己的间距，修改 theme.spacings 即可修改默认的间距。
const config = { theme: { spacings: { 0: 0, 1: 4, 2: 8, 3: 12, 4: 16, 5: 20, 6: 24, 7: 28, 8: 32, 9: 36, 10: 40, 11: 44, 12: 48, 14: 56, 16: 64, 20: 80, 24: 96, 28: 112, 32: 128, 36: 144, 40: 160, 44: 176, 48: 192, 52: 208, 56: 224, 60: 240, 64: 256, 72: 288, 80: 320, 96: 384, }, },}Usage#
How to use the spacing?
example1:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Use circle{8}, not circle-{8}, circle{8} is a value designed with constraints. circle-{8} is a freestyle value.
example2:
SyntaxError: Unexpected token (1:8)
1 : return ()
^The mr2 in the above example, it is the preset spacing in the design system, which is equivalent to margin-right: 8px.
Spacing can be used in these Atomic Props:
p{spacing}m{spacing}w{spacing}maxW{spacing}minW{spacing}h{spacing}maxH{spacing}minH{spacing}spaceX{spacing}spaceY{spacing}square{spacing}circle{spacing}{top|right|bottom|left}{spacing}
Compare with precise value#
In some cases, the spacing of the design system cannot meet your UI needs. This is a more flexible way you can use: precise values. Any value can be set through the middle bar -, such as the following square-100, mr-20, will produce styles width: 100px; height: 100px, margin-right: 20px:
SyntaxError: Unexpected token (1:8)
1 : return ()
^In most cases, it is recommended to use regular spacing in the project, which will make your UI more design and rhythmic.
Customize Spacings#
As you see, 100 is not the preset spacing，you can customize it with setTheme:
setTheme({ spacings: { 100: 400, },})Then you can use it as m100, p100, w100, circle100, top100, etc.
SyntaxError: Unexpected token (1:8)
1 : return ()
^