Skip to content

Commit a87e6f1

Browse files
mobilymobily
committed
Update example
1 parent eece2a7 commit a87e6f1

File tree

1 file changed

+138
-117
lines changed
  • example/src/typescript/screens/Playground

1 file changed

+138
-117
lines changed

‎example/src/typescript/screens/Playground/index.tsx‎

Lines changed: 138 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,157 @@
11
import React from 'react'
2-
import { Text } from 'react-native'
2+
import { ScrollView, Text } from 'react-native'
33
import { Box, Columns, Column, Stack, Inline, Tiles, FillView } from '@mobily/stacks'
44

55
import { Placeholder } from '../../components/Placeholder'
66

77
export const Playground = () => {
88
return (
9-
<Box padding={2}>
10-
<Stack space={2}>
11-
<Text>Columns</Text>
12-
<Stack space={3}>
13-
<Columns space={1}>
14-
<Column>
15-
<Text>C1</Text>
16-
</Column>
17-
<Column>
18-
<Text>C2</Text>
19-
</Column>
20-
<Column>
21-
<Text>C3</Text>
22-
</Column>
23-
</Columns>
24-
<Columns space={1} alignY="center">
25-
<Column>
26-
<Text>C1</Text>
27-
</Column>
28-
<Column>
29-
<Columns space={2}>
30-
<Column>
31-
<Text>C21</Text>
32-
</Column>
33-
<Column>
34-
<Text>C22</Text>
35-
</Column>
36-
</Columns>
37-
</Column>
38-
<Column>
39-
<Tiles columns={2} space={1}>
40-
<Text>T1</Text>
41-
<Text>T2</Text>
42-
<Text>T3</Text>
43-
</Tiles>
44-
</Column>
45-
</Columns>
46-
<Columns space={1}>
47-
<Column width="1/2">
48-
<Text>C1</Text>
49-
</Column>
50-
<Column width="content">
51-
<Text>C2</Text>
52-
</Column>
53-
<Column>
54-
<Text>C3</Text>
55-
</Column>
56-
<Column>
57-
<Text>C4</Text>
58-
</Column>
59-
</Columns>
60-
<Columns space={2}>
61-
<Column width="1/4">
62-
<Columns space={2}>
63-
<Column width="1/2">
64-
<Text>C11</Text>
65-
</Column>
66-
<Column width="1/2">
67-
<Text>C12</Text>
68-
</Column>
69-
</Columns>
70-
</Column>
71-
<Column>
72-
<Text>C2</Text>
73-
<Text>C3</Text>
74-
</Column>
75-
</Columns>
76-
</Stack>
9+
<ScrollView>
10+
<Box padding={2}>
11+
<Stack space={2}>
12+
<Text>Columns</Text>
13+
<Stack space={3}>
14+
<Columns space={1}>
15+
<Column>
16+
<Text>C1</Text>
17+
</Column>
18+
<Column>
19+
<Text>C2</Text>
20+
</Column>
21+
<Column>
22+
<Text>C3</Text>
23+
</Column>
24+
</Columns>
25+
<Columns space={1} alignY="center">
26+
<Column>
27+
<Text>C1</Text>
28+
</Column>
29+
<Column>
30+
<Columns space={2}>
31+
<Column>
32+
<Text>C21</Text>
33+
</Column>
34+
<Column>
35+
<Text>C22</Text>
36+
</Column>
37+
</Columns>
38+
</Column>
39+
<Column>
40+
<Tiles columns={2} space={1}>
41+
<Text>T1</Text>
42+
<Text>T2</Text>
43+
<Text>T3</Text>
44+
</Tiles>
45+
</Column>
46+
</Columns>
47+
<Columns space={1}>
48+
<Column width="1/2">
49+
<Text>C1</Text>
50+
</Column>
51+
<Column width="content">
52+
<Text>C2</Text>
53+
</Column>
54+
<Column>
55+
<Text>C3</Text>
56+
</Column>
57+
<Column>
58+
<Text>C4</Text>
59+
</Column>
60+
</Columns>
61+
<Columns space={2}>
62+
<Column width="1/4">
63+
<Columns space={2}>
64+
<Column width="1/2">
65+
<Text>C11</Text>
66+
</Column>
67+
<Column width="1/2">
68+
<Text>C12</Text>
69+
</Column>
70+
</Columns>
71+
</Column>
72+
<Column>
73+
<Text>C2</Text>
74+
<Text>C3</Text>
75+
</Column>
76+
</Columns>
77+
</Stack>
7778

78-
<Text>Inline</Text>
79-
<Inline space={1}>
80-
<Text>inline 1</Text>
81-
<Text>inline 2</Text>
82-
<Text>inline 3</Text>
83-
</Inline>
84-
<Inline space={1}>
85-
<Text>Lorem ipsum</Text>
86-
<Text>Quisquam hic</Text>
87-
<Text>nulla ad velit</Text>
88-
<Text>Lorem ipsum</Text>
89-
</Inline>
79+
<Text>Inline</Text>
80+
<Inline space={1}>
81+
<Text>inline 1</Text>
82+
<Text>inline 2</Text>
83+
<Text>inline 3</Text>
84+
</Inline>
85+
<Inline space={1}>
86+
<Text>Lorem ipsum</Text>
87+
<Text>Quisquam hic</Text>
88+
<Text>nulla ad velit</Text>
89+
<Text>Lorem ipsum</Text>
90+
</Inline>
9091

91-
<Text>Tiles</Text>
92-
<Tiles columns={2} space={1}>
93-
<Text>T1</Text>
94-
<Text>T2</Text>
95-
<Text>T3</Text>
96-
<Text>T4</Text>
97-
<Text>T5</Text>
98-
</Tiles>
92+
<Text>Tiles</Text>
93+
<Tiles columns={2} space={1}>
94+
<Text>T1</Text>
95+
<Text>T2</Text>
96+
<Text>T3</Text>
97+
<Text>T4</Text>
98+
<Text>T5</Text>
99+
</Tiles>
99100

100-
<Text>Box</Text>
101-
<Box direction="row">
102-
<Box flex="fluid" direction="row" alignX="between">
103-
<Box flex="fluid" alignX="center" alignY="center">
104-
<Text>B1</Text>
105-
<Text>B2</Text>
106-
</Box>
107-
<Box flex="1/4" style={{ height: 200, backgroundColor: 'pink' }}>
108-
<Box style={{ height: 100 }}>
109-
<FillView alignX="center" alignY="center" style={{ backgroundColor: 'yellow' }}>
110-
<Text>B0</Text>
111-
</FillView>
101+
<Text>Box</Text>
102+
<Box direction="row">
103+
<Box flex="fluid" direction="row" alignX="between">
104+
<Box flex="fluid" alignX="center" alignY="center">
105+
<Text>B1</Text>
106+
<Text>B2</Text>
107+
</Box>
108+
<Box flex="1/4" style={{ height: 200, backgroundColor: 'pink' }}>
109+
<Box style={{ height: 100 }}>
110+
<FillView alignX="center" alignY="center" style={{ backgroundColor: 'yellow' }}>
111+
<Text>B0</Text>
112+
</FillView>
113+
</Box>
114+
<Text>B1</Text>
112115
</Box>
113-
<Text>B1</Text>
114116
</Box>
115117
</Box>
116-
</Box>
117-
<Stack space={4} horizontal={true} align="center">
118-
<Text>T1</Text>
119-
<Text>T2</Text>
120-
<Text>T3</Text>
121-
</Stack>
122-
<Stack space={4} horizontal={true} align={['center', 'bottom']}>
123-
<Placeholder height={50}>
118+
<Stack space={4} align={['center', 'bottom']}>
119+
<Placeholder height={50} width={120}>
120+
<Text>T1</Text>
121+
</Placeholder>
122+
<Placeholder height={70} width={200}>
123+
<Text>T2</Text>
124+
</Placeholder>
125+
<Placeholder height={30} width={150}>
126+
<Text>T3</Text>
127+
</Placeholder>
128+
</Stack>
129+
<Stack space={4} horizontal={true} align="center">
124130
<Text>T1</Text>
125-
</Placeholder>
126-
<Placeholder height={70}>
127131
<Text>T2</Text>
128-
</Placeholder>
129-
<Placeholder height={30}>
130132
<Text>T3</Text>
131-
</Placeholder>
133+
</Stack>
134+
<Stack space={4} horizontal={true} align={['center', 'bottom']}>
135+
<Placeholder height={50}>
136+
<Text>T1</Text>
137+
</Placeholder>
138+
<Placeholder height={70}>
139+
<Text>T2</Text>
140+
</Placeholder>
141+
<Placeholder height={30}>
142+
<Text>T3</Text>
143+
</Placeholder>
144+
</Stack>
145+
<Columns style={{ height: 64, backgroundColor: 'white' }} alignX="evenly">
146+
<Column style={{ backgroundColor: 'red' }}>
147+
<Text>T1</Text>
148+
</Column>
149+
<Column style={{ backgroundColor: 'red' }}>
150+
<Text>T2</Text>
151+
</Column>
152+
</Columns>
132153
</Stack>
133-
</Stack>
134-
</Box>
154+
</Box>
155+
</ScrollView>
135156
)
136157
}

0 commit comments

Comments
 (0)