UNPKG

@combine-labs/combine-polaris

Version:

Combine Lab's product component library. Forked from Shopify's Polaris.

github.com/Combine-Labs/combine-polaris

Combine-Labs/combine-polaris

43 lines (31 loc) • 923 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
--- name: Spacing category: Structure keywords: - Spacing - spacer - margin - padding - blank space --- # Spacing This component serves two main purposes: functional spacing css (margin and padding), and providing a blank space for layout purposes. ## Functional Spacing CSS Sometimes you need a one-off bit of margin or padding to get things to lay out properly. You can use this component for that. Either use `margin="tight"` or `padding`, etc. to give margin/padding in all directions. Or use `marginTop="loose"` or `paddingBottom` to give margin/padding in a specific direction. ## Blank Space Sometimes you have a form that looks like this: ``` XXXXXXX | XXXXXXX | XXXXXXX XXXXXXXXXXXX | XXXXXXXXXXXX ``` Now you can put a Spacing object in there: ``` XXXXXXX | XXXXXXX | XXXXXXX XXXXXXX | XXXXXXX | Spacing ``` And it will lay out properly: ``` XXXXXXX | XXXXXXX | XXXXXXX XXXXXXX | XXXXXXX ```