Skip to content

Commit 58b33eb

Browse files
mobilymobily
committed
Update docs
1 parent 921a14e commit 58b33eb

File tree

3 files changed

+259
-4
lines changed

3 files changed

+259
-4
lines changed

‎docs/docs/components/column.mdx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,14 @@ function() {
4343
<StacksProvider>
4444
<Columns space={4}>
4545
<Column width="content" height="fluid">
46-
<Placeholder width={200} height={100} />
47-
<Box flex="fluid" marginTop={4}>
48-
<FluidPlaceholder width={200} />
49-
</Box>
46+
<Rows space={4}>
47+
<Row height="content">
48+
<Placeholder width={200} height={100} />
49+
</Row>
50+
<Row>
51+
<FluidPlaceholder width={200} />
52+
</Row>
53+
</Rows>
5054
</Column>
5155
<Column>
5256
<Placeholder height={300} />

‎docs/docs/components/row.mdx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
id: row
3+
title: Row
4+
---
5+
6+
import { Props, BoxProps } from '../../core/components';
7+
8+
Use the `Row` component along with `Rows`.
9+
10+
:::note
11+
12+
`Column` component accepts [`View`](https://reactnative.dev/docs/view) props.
13+
14+
:::
15+
16+
## Examples
17+
18+
```jsx live
19+
function() {
20+
return (
21+
<StacksProvider>
22+
<PlaceholderView height={500}>
23+
<Rows space={1} alignY="evenly">
24+
<Row height="content">
25+
<Placeholder height={100} />
26+
</Row>
27+
<Row height="1/2">
28+
<FluidPlaceholder />
29+
</Row>
30+
<Row height="content">
31+
<Placeholder height={100} />
32+
</Row>
33+
</Rows>
34+
</PlaceholderView>
35+
</StacksProvider>
36+
)
37+
}
38+
```
39+
40+
Use the `height` property to adjust the column height against other columns.
41+
42+
```jsx live
43+
function() {
44+
return (
45+
<StacksProvider>
46+
<PlaceholderView height={500}>
47+
<Rows space={4}>
48+
<Row>
49+
<FluidPlaceholder />
50+
</Row>
51+
<Row height="content">
52+
<Columns space={4}>
53+
<Column>
54+
<Placeholder height={200} />
55+
</Column>
56+
<Column>
57+
<Placeholder height={200} />
58+
</Column>
59+
</Columns>
60+
</Row>
61+
<Row>
62+
<FluidPlaceholder />
63+
</Row>
64+
</Rows>
65+
</PlaceholderView>
66+
</StacksProvider>
67+
)
68+
}
69+
70+
```
71+
72+
## Props
73+
74+
<Props
75+
data={[
76+
{
77+
name: 'width',
78+
type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
79+
required: false,
80+
defaultValue: 'fluid'
81+
},
82+
{
83+
name: 'height',
84+
type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
85+
required: false,
86+
defaultValue: 'fluid'
87+
},
88+
]}
89+
/>
90+
91+
92+
## Box Props
93+
94+
<BoxProps omit={[
95+
'margin',
96+
'marginX',
97+
'marginY',
98+
'marginTop',
99+
'marginBottom',
100+
'marginLeft',
101+
'marginRight',
102+
'marginStart',
103+
'marginEnd',
104+
]} />

‎docs/docs/components/rows.mdx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
id: rows
3+
title: Rows
4+
---
5+
6+
import { Props, BoxProps } from '../../core/components';
7+
8+
`Rows` (and `Row`) lays out content vertically. The main difference between `Rows` and `Stack` is that `Rows` has the full height of its container.
9+
10+
:::note
11+
12+
`Rows` component accepts [`View`](https://reactnative.dev/docs/view) props.
13+
14+
:::
15+
16+
## Examples
17+
18+
Set spacing between rows and lay out content vertically.
19+
20+
```jsx live
21+
function() {
22+
return (
23+
<StacksProvider>
24+
<PlaceholderView height={500}>
25+
<Rows space={1}>
26+
<Row>
27+
<FluidPlaceholder />
28+
</Row>
29+
<Row>
30+
<FluidPlaceholder />
31+
</Row>
32+
<Row>
33+
<FluidPlaceholder />
34+
</Row>
35+
</Rows>
36+
</PlaceholderView>
37+
</StacksProvider>
38+
)
39+
}
40+
```
41+
42+
Multiple `Rows` components can be nested.
43+
44+
```jsx live
45+
function() {
46+
return (
47+
<StacksProvider>
48+
<PlaceholderView height={500}>
49+
<Rows space={10}>
50+
<Row height="content">
51+
<Rows space={1}>
52+
<Row>
53+
<Placeholder />
54+
</Row>
55+
<Row>
56+
<Placeholder />
57+
</Row>
58+
</Rows>
59+
</Row>
60+
<Row>
61+
<FluidPlaceholder />
62+
</Row>
63+
</Rows>
64+
</PlaceholderView>
65+
</StacksProvider>
66+
)
67+
}
68+
```
69+
70+
Set horizontal alignment.
71+
72+
```jsx live
73+
function() {
74+
return (
75+
<StacksProvider>
76+
<PlaceholderView height={300}>
77+
<Rows space={1} alignX="center">
78+
<Row width="content">
79+
<FluidPlaceholder width={180} />
80+
</Row>
81+
<Row width="content">
82+
<FluidPlaceholder width={240} />
83+
</Row>
84+
<Row width="content">
85+
<FluidPlaceholder width={140} />
86+
</Row>
87+
</Rows>
88+
</PlaceholderView>
89+
</StacksProvider>
90+
)
91+
}
92+
```
93+
94+
Set vertical alignment.
95+
96+
```jsx live
97+
function() {
98+
return (
99+
<StacksProvider>
100+
<PlaceholderView height={500}>
101+
<Rows space={1} alignY="between">
102+
<Row height="content">
103+
<Placeholder height={80} />
104+
</Row>
105+
<Row height="content">
106+
<Placeholder height={200} />
107+
</Row>
108+
<Row height="content">
109+
<Placeholder height={60} />
110+
</Row>
111+
</Rows>
112+
</PlaceholderView>
113+
</StacksProvider>
114+
)
115+
}
116+
```
117+
118+
## Props
119+
120+
<Props
121+
data={[
122+
{
123+
name: 'space',
124+
type: 'responsiveProp<float>',
125+
required: false,
126+
},
127+
{
128+
name: 'alignY',
129+
type: 'responsiveProp<[#top | #center | #bottom | #stretch | #between | #around | #evenly]>',
130+
required: false,
131+
},
132+
{
133+
name: 'alignX',
134+
type: 'responsiveProp<[#left | #center | #right]>',
135+
required: false,
136+
},
137+
{
138+
name: 'reverse',
139+
type: 'bool',
140+
required: false,
141+
},
142+
]}
143+
/>
144+
145+
## Box Props
146+
147+
<BoxProps />

0 commit comments

Comments
 (0)