v4.9.15
- 💄 chore(deps): Update dependency @uiw/react-code-preview to v4.0.5 (#7) 0922515 @renovate-bot
- 🌟 feat: output bundle file & update dependency kkt to v7.1.5 646f1a7 @jaywcjlove
- 💄 chore: update workflows config. 1317887 @jaywcjlove
- 💄 chore: update renovate.json 78bdc57 @jaywcjlove
- ⛑ test: Fix jest config. a8a442e @jaywcjlove
- 🐞 fix: Fix hasSider props. cf76cac @jaywcjlove
- 💄 chore: format code. 23f8bd7 @jaywcjlove
- ⛑ test: add test case. c72a0e0 @jaywcjlove
- ⛑ test: add test case. ee1dddf @jaywcjlove
- 📖 doc: Update README.md 658fa2b @jaywcjlove
- 🌍 website: update markdown preview issue. 6af5321 @jaywcjlove
- 🌍 website: update markdown preview issue. 65cb632 @jaywcjlove
- 💄 chore: update workflows config. dfc1996 @jaywcjlove
- 📖 doc: Update README.md 4b12fab @jaywcjlove
Bundle Example: https://uiwjs.github.io/react-layout/bundle.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
<link rel="stylesheet" href="https://unpkg.com/@uiw/[email protected]/dist/layout.css">
</head>
<body>
<div id="container" style="padding: 24px"></div>
<script src="https://unpkg.com/@uiw/[email protected]/dist/layout.min.js"></script>
<script type="text/babel">
import Layout from '@uiw/react-layout';
const { Header, Footer, Sider, Content } = Layout;
const stylHeader = { color: '#fff' }
const stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }
const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }
function Demo() {
const [collapsed, setCollapsed] = React.useState(false)
return (
<React.Fragment>
<Layout style={{ marginBottom: 20 }}>
<Header style={stylHeader}>Header</Header>
<Layout>
<Sider style={stylSider}>Sider</Sider>
<Content style={stylConten}>Content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout style={{ marginBottom: 20 }}>
<Header style={stylHeader}>Header</Header>
<Layout>
<Content style={stylConten}>Content</Content>
<Sider style={stylSider}>Sider</Sider>
</Layout>
<Footer>Footer</Footer>
</Layout>
<Layout style={{ marginBottom: 20 }}>
<Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
<Layout>
<Header style={stylHeader}>
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>
</Header>
<Content style={stylConten}>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
<Layout style={{ marginBottom: 20 }}>
<Header style={stylHeader}>Header</Header>
<Content style={stylConten}>Content</Content>
<Footer>Footer</Footer>
</Layout>
</React.Fragment>
);
}
ReactDOM.render(<Demo />, document.getElementById('container'));
</script>
</body>
</html>Contributors
jaywcjlove and renovate-bot