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, }, },}
#
UsageHow 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 valueIn 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 SpacingsAs 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 () ^