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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO

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 ()
            ^
LIVE DEMO