Skip to content

Commit b64dd42

Browse files
jaywcjlovejaywcjlove
committed
website: add bundle example page.
1 parent 6e780ef commit b64dd42

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

‎website/public/bundle.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" crossorigin></script>
5+
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
6+
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
7+
<script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js"></script>
8+
<script src="https://unpkg.com/@uiw/[email protected]/dist/layout.min.js"></script>
9+
<link rel="stylesheet" href="https://unpkg.com/@uiw/[email protected]/dist/layout.css">
10+
<title>@uiw/react-layout bundle example</title>
11+
<meta name="keywords" content="react,simple,monorepo,layout,react-layout,component,project,package,development" />
12+
<meta name="description" content="React components that handle the overall layout of the page." />
13+
</head>
14+
<body>
15+
<div id="container" style="padding: 24px"></div>
16+
<script type="text/babel">
17+
import Layout from '@uiw/react-layout';
18+
const { Header, Footer, Sider, Content } = Layout;
19+
20+
const stylHeader = { color: '#fff' }
21+
const stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }
22+
const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }
23+
24+
function Demo() {
25+
const [collapsed, setCollapsed] = React.useState(false)
26+
return (
27+
<React.Fragment>
28+
<Layout style={{ marginBottom: 20 }}>
29+
<Header style={stylHeader}>Header</Header>
30+
<Layout>
31+
<Sider style={stylSider}>Sider</Sider>
32+
<Content style={stylConten}>Content</Content>
33+
</Layout>
34+
<Footer>Footer</Footer>
35+
</Layout>
36+
37+
<Layout style={{ marginBottom: 20 }}>
38+
<Header style={stylHeader}>Header</Header>
39+
<Layout>
40+
<Content style={stylConten}>Content</Content>
41+
<Sider style={stylSider}>Sider</Sider>
42+
</Layout>
43+
<Footer>Footer</Footer>
44+
</Layout>
45+
46+
<Layout style={{ marginBottom: 20 }}>
47+
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
48+
<Layout>
49+
<Header style={stylHeader}>
50+
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>
51+
</Header>
52+
<Content style={stylConten}>Content</Content>
53+
<Footer>Footer</Footer>
54+
</Layout>
55+
</Layout>
56+
57+
<Layout style={{ marginBottom: 20 }}>
58+
<Header style={stylHeader}>Header</Header>
59+
<Content style={stylConten}>Content</Content>
60+
<Footer>Footer</Footer>
61+
</Layout>
62+
</React.Fragment>
63+
);
64+
}
65+
66+
ReactDOM.render(<Demo />, document.getElementById('container'));
67+
</script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)