Skip to content

Commit 82305fa

Browse files
jaywcjlovejaywcjlove
committed
chore: add bundle example.
1 parent aab07db commit 82305fa

File tree

1 file changed

+205
-0
lines changed

1 file changed

+205
-0
lines changed

‎public/bundle.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://unpkg.com/@babel/standalone@7.17.x/babel.min.js" crossorigin></script>
5+
<script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
6+
<script src="https://unpkg.com/react-dom@17.x/umd/react-dom.development.js" crossorigin></script>
7+
<script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
8+
9+
<link rel="stylesheet" href="https://unpkg.com/@uiw/react-split/dist/split.css">
10+
</head>
11+
<body>
12+
<div id="container" style="padding: 24px"></div>
13+
<script src="https://unpkg.com/@uiw/react-split/dist/split.min.js"></script>
14+
<script type="text/babel">
15+
import Split from '@uiw/react-split';
16+
console.log(Split)
17+
const Demo = () => {
18+
return (
19+
<React.Fragment>
20+
<Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}>
21+
<div style={{ width: '20%', minWidth: 30 }}>
22+
<iframe
23+
srcDoc="<div>test</div>"
24+
style={{ width: '100%', height: '100%' }}
25+
title="Code Preview"
26+
sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
27+
/>
28+
</div>
29+
<div style={{ width: '80%', minWidth: 100 }}>
30+
Right Pane
31+
</div>
32+
</Split>
33+
<Split style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
34+
<div>
35+
Left Pane
36+
</div>
37+
<div>
38+
Center Pane
39+
</div>
40+
<div>
41+
Center Pane
42+
</div>
43+
<div style={{ flex: 1 }}>
44+
Right Pane
45+
</div>
46+
</Split>
47+
<Split lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
48+
<div>
49+
Left Pane
50+
</div>
51+
<div>
52+
Center Pane
53+
</div>
54+
<div>
55+
Center Pane
56+
</div>
57+
<div style={{ flex: 1 }}>
58+
Right Pane
59+
</div>
60+
</Split>
61+
<Split mode="vertical" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
62+
<div style={{ height: '33.3%' }}>
63+
Left Pane
64+
</div>
65+
<div style={{ height: '33.3%' }}>
66+
Center Pane
67+
</div>
68+
<div style={{ flex: 1 }}>
69+
Right Pane
70+
</div>
71+
</Split>
72+
<Split mode="vertical" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
73+
<div style={{ height: '50%' }}>
74+
Top Pane
75+
</div>
76+
<div style={{ height: '50%' }}>
77+
Bottom Pane
78+
</div>
79+
</Split>
80+
<Split style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
81+
<Split mode="vertical">
82+
<div style={{ height: '50%' }}>
83+
Top Pane
84+
</div>
85+
<Split style={{ height: '50%' }}>
86+
<div>
87+
Left Pane
88+
</div>
89+
<div style={{ flex: 1 }}>
90+
Right Pane
91+
</div>
92+
</Split>
93+
</Split>
94+
<div style={{ flex: 1 }}>
95+
Right Pane
96+
</div>
97+
</Split>
98+
<Split visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
99+
<div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
100+
Left Pane
101+
</div>
102+
<div style={{ flex: 1 }}>
103+
Right Pane
104+
</div>
105+
</Split>
106+
<Split visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
107+
<div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
108+
Pane 1
109+
</div>
110+
<div style={{ maxWidth: 60 }}>
111+
Pane 2
112+
</div>
113+
<div>
114+
Pane 3
115+
</div>
116+
<div>
117+
Pane 4
118+
</div>
119+
<div style={{ flex: 1 }}>
120+
Pane 5
121+
</div>
122+
</Split>
123+
<Split disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
124+
<div style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}>
125+
Left Pane
126+
</div>
127+
<Split disable mode="vertical">
128+
<div>
129+
Top Pane
130+
</div>
131+
<div>
132+
Bottom Pane
133+
</div>
134+
</Split>
135+
<div style={{ flex: 1 }}>
136+
Right Pane
137+
</div>
138+
</Split>
139+
<Split disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}>
140+
<div style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}>
141+
Pane 1
142+
</div>
143+
<div style={{ maxWidth: 60 }}>
144+
Pane 2
145+
</div>
146+
<div>
147+
Pane 3
148+
</div>
149+
<div>
150+
Pane 4
151+
</div>
152+
<div style={{ flex: 1 }}>
153+
Pane 5
154+
</div>
155+
</Split>
156+
<Split
157+
style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 18 }}
158+
>
159+
<div style={{ minWidth: 60 }}>
160+
test
161+
</div>
162+
<div style={{ minWidth: 80, flex: 1 }}>
163+
Right Pane
164+
</div>
165+
</Split>
166+
<Split mode="vertical" visiable={false} style={{ marginTop: 18 }}>
167+
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
168+
Header
169+
</div>
170+
<Split visiable={false}>
171+
<div style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}>
172+
Sider
173+
</div>
174+
<div style={{ width: '100%', background: '#ececec' }}>
175+
Content
176+
</div>
177+
</Split>
178+
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
179+
Footer
180+
</div>
181+
</Split>
182+
<div style={{ height: 20 }}></div>
183+
<Split visiable={false}>
184+
<div style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}>
185+
Sider
186+
</div>
187+
<Split mode="vertical" visiable={false} style={{ width: '100%' }}>
188+
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
189+
Header
190+
</div>
191+
<div style={{ minHeight: 85, background: '#b5b5b5' }}>
192+
Content
193+
</div>
194+
<div style={{ minHeight: 45, background: '#dcdcdc' }}>
195+
Footer
196+
</div>
197+
</Split>
198+
</Split>
199+
</React.Fragment>
200+
);
201+
}
202+
ReactDOM.render(<Demo />, document.getElementById('container'));
203+
</script>
204+
</body>
205+
</html>

0 commit comments

Comments
 (0)