Skip to content

Commit fa44fce

Browse files
mobilymobily
committed
Update docs
1 parent 54b2f8e commit fa44fce

File tree

16 files changed

+235
-194
lines changed

16 files changed

+235
-194
lines changed

‎docs/docs/components/box.mdx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,33 @@ import { Props, BoxProps } from '../../core/components';
1818
```jsx live
1919
function() {
2020
return (
21-
<Box direction="row" padding={2}>
22-
<Box flex="fluid">
23-
<Box flex="fluid" alignX="center" alignY="center">
24-
<Placeholder width={160} height={160} />
21+
<App>
22+
<Box direction="row" padding={2}>
23+
<Box flex="fluid">
24+
<Box flex="fluid" alignX="center" alignY="center">
25+
<Placeholder width={160} height={160} />
26+
</Box>
2527
</Box>
26-
</Box>
27-
<Box flex="1/3">
28-
<Box marginBottom={5}>
29-
<Stack space={1}>
30-
<Placeholder height={20} />
31-
<Placeholder height={20} />
32-
<Placeholder height={20} />
33-
<Placeholder height={20} />
34-
</Stack>
35-
</Box>
36-
<Box>
37-
<Tiles columns={2} space={1}>
38-
<Placeholder height={50} />
39-
<Placeholder height={50} />
40-
<Placeholder height={50} />
41-
<Placeholder height={50} />
42-
</Tiles>
28+
<Box flex="1/3">
29+
<Box marginBottom={5}>
30+
<Stack space={1}>
31+
<Placeholder height={20} />
32+
<Placeholder height={20} />
33+
<Placeholder height={20} />
34+
<Placeholder height={20} />
35+
</Stack>
36+
</Box>
37+
<Box>
38+
<Tiles columns={2} space={1}>
39+
<Placeholder height={50} />
40+
<Placeholder height={50} />
41+
<Placeholder height={50} />
42+
<Placeholder height={50} />
43+
</Tiles>
44+
</Box>
4345
</Box>
4446
</Box>
45-
</Box>
47+
</App>
4648
)
4749
}
4850
```

‎docs/docs/components/column.mdx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,19 @@ Use the `Column` component along with `Columns`.
1818
```jsx live
1919
function() {
2020
return (
21-
<Columns alignX="between">
22-
<Column width="content">
23-
<Placeholder width={100} />
24-
</Column>
25-
<Column width="1/2">
26-
<Placeholder />
27-
</Column>
28-
<Column width="content">
29-
<Placeholder width={100} />
30-
</Column>
31-
</Columns>
21+
<App>
22+
<Columns alignX="between">
23+
<Column width="content">
24+
<Placeholder width={100} />
25+
</Column>
26+
<Column width="1/2">
27+
<Placeholder />
28+
</Column>
29+
<Column width="content">
30+
<Placeholder width={100} />
31+
</Column>
32+
</Columns>
33+
</App>
3234
)
3335
}
3436
```

‎docs/docs/components/columns.mdx‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,19 @@ Set spacing between columns and lay out content horizontally.
2020
```jsx live
2121
function() {
2222
return (
23-
<Columns space={1}>
24-
<Column>
25-
<Placeholder />
26-
</Column>
27-
<Column>
28-
<Placeholder />
29-
</Column>
30-
<Column>
31-
<Placeholder />
32-
</Column>
33-
</Columns>
23+
<App>
24+
<Columns space={1}>
25+
<Column>
26+
<Placeholder />
27+
</Column>
28+
<Column>
29+
<Placeholder />
30+
</Column>
31+
<Column>
32+
<Placeholder />
33+
</Column>
34+
</Columns>
35+
</App>
3436
)
3537
}
3638
```
@@ -40,21 +42,24 @@ Multiple `Columns` components can be nested.
4042
```jsx live
4143
function() {
4244
return (
43-
<Columns space={10}>
44-
<Column>
45-
<Columns space={1}>
46-
<Column>
47-
<Placeholder />
48-
</Column>
49-
<Column>
50-
<Placeholder />
51-
</Column>
52-
</Columns>
53-
</Column>
54-
<Column>
55-
<Placeholder />
56-
</Column>
57-
</Columns>
45+
<App>
46+
<Columns space={10}>
47+
<Column>
48+
<Columns space={1}>
49+
<Column>
50+
<Placeholder />
51+
</Column>
52+
<Column>
53+
<Placeholder />
54+
</Column>
55+
</Columns>
56+
</Column>
57+
<Column>
58+
<Placeholder />
59+
</Column>
60+
</Columns>
61+
</App>
62+
5863
)
5964
}
6065
```
@@ -64,17 +69,19 @@ Set horizontal alignment.
6469
```jsx live
6570
function() {
6671
return (
67-
<Columns space={1} alignX="center">
68-
<Column width="content">
69-
<Placeholder width={80} />
70-
</Column>
71-
<Column width="content">
72-
<Placeholder width={120} />
73-
</Column>
74-
<Column width="content">
75-
<Placeholder width={80} />
76-
</Column>
77-
</Columns>
72+
<App>
73+
<Columns space={1} alignX="center">
74+
<Column width="content">
75+
<Placeholder width={80} />
76+
</Column>
77+
<Column width="content">
78+
<Placeholder width={120} />
79+
</Column>
80+
<Column width="content">
81+
<Placeholder width={80} />
82+
</Column>
83+
</Columns>
84+
</App>
7885
)
7986
}
8087
```
@@ -84,17 +91,19 @@ Set vertical alignment.
8491
```jsx live
8592
function() {
8693
return (
87-
<Columns space={1} alignY="center">
88-
<Column>
89-
<Placeholder height={180} />
90-
</Column>
91-
<Column>
92-
<Placeholder height={240} />
93-
</Column>
94-
<Column>
95-
<Placeholder height={120} />
96-
</Column>
97-
</Columns>
94+
<App>
95+
<Columns space={1} alignY="center">
96+
<Column>
97+
<Placeholder height={180} />
98+
</Column>
99+
<Column>
100+
<Placeholder height={240} />
101+
</Column>
102+
<Column>
103+
<Placeholder height={120} />
104+
</Column>
105+
</Columns>
106+
</App>
98107
)
99108
}
100109
```

‎docs/docs/components/fill-view.mdx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,20 @@ import { Props, BoxProps } from '../../core/components';
1818
```jsx live
1919
function() {
2020
return (
21-
<PlaceholderView height={500}>
22-
<FillView alignX="center" alignY="center" direction="row">
23-
<Box flex="3/4">
24-
<Stack space={1}>
25-
<Placeholder height={60} />
26-
<Placeholder height={60} />
27-
<Placeholder height={60} />
28-
<Placeholder height={60} />
29-
</Stack>
30-
</Box>
31-
</FillView>
32-
</PlaceholderView>
21+
<App>
22+
<PlaceholderView height={500}>
23+
<FillView alignX="center" alignY="center" direction="row">
24+
<Box flex="3/4">
25+
<Stack space={1}>
26+
<Placeholder height={60} />
27+
<Placeholder height={60} />
28+
<Placeholder height={60} />
29+
<Placeholder height={60} />
30+
</Stack>
31+
</Box>
32+
</FillView>
33+
</PlaceholderView>
34+
</App>
3335
)
3436
}
3537
```

‎docs/docs/components/inline.mdx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,16 @@ Simple usage.
2020
```jsx live
2121
function() {
2222
return (
23-
<Inline space={2}>
24-
<Placeholder width={90} />
25-
<Placeholder width={60} />
26-
<Placeholder width={120} />
27-
<Placeholder width={200} />
28-
<Placeholder width={100} />
29-
<Placeholder width={140} />
30-
</Inline>
23+
<App>
24+
<Inline space={2}>
25+
<Placeholder width={90} />
26+
<Placeholder width={60} />
27+
<Placeholder width={120} />
28+
<Placeholder width={200} />
29+
<Placeholder width={100} />
30+
<Placeholder width={140} />
31+
</Inline>
32+
</App>
3133
)
3234
}
3335
```
@@ -37,16 +39,18 @@ Multiple `Inline` components can be nested.
3739
```jsx live
3840
function() {
3941
return (
40-
<Inline space={10}>
41-
<Inline space={2}>
42-
<Placeholder width={60} />
43-
<Placeholder width={90} />
42+
<App>
43+
<Inline space={10}>
44+
<Inline space={2}>
45+
<Placeholder width={60} />
46+
<Placeholder width={90} />
47+
</Inline>
48+
<Inline space={2}>
49+
<Placeholder width={60} />
50+
<Placeholder width={90} />
51+
</Inline>
4452
</Inline>
45-
<Inline space={2}>
46-
<Placeholder width={60} />
47-
<Placeholder width={90} />
48-
</Inline>
49-
</Inline>
53+
</App>
5054
)
5155
}
5256
```
@@ -56,13 +60,15 @@ Set horizontal alignment.
5660
```jsx live
5761
function() {
5862
return (
59-
<Inline space={2} align="center">
60-
<Placeholder width={90} />
61-
<Placeholder width={60} />
62-
<Placeholder width={120} />
63-
<Placeholder width={100} />
64-
<Placeholder width={100} />
65-
</Inline>
63+
<App>
64+
<Inline space={2} align="center">
65+
<Placeholder width={90} />
66+
<Placeholder width={60} />
67+
<Placeholder width={120} />
68+
<Placeholder width={100} />
69+
<Placeholder width={100} />
70+
</Inline>
71+
</App>
6672
)
6773
}
6874
```

0 commit comments

Comments
 (0)