Releases · uiwjs/react-layout

25 May 03:41

v4.10.4

d76ed69

v4.10.4 Latest

Latest

Documentation v4.10.4: https://raw.githack.com/uiwjs/react-codemirror/d6e4b6a/index.html
Comparing Changes: v4.10.3...v4.10.4

💄 chore: update workflows config. 6085e47 @jaywcjlove
💄 chore(deps): update dependency tsbb to v4 #43 c9cda99 @jaywcjlove
🐞 fix: fix ref issue. daa84cb @jaywcjlove

Contributors

jaywcjlove

Assets 2

10 Oct 08:34

github-actions

v4.10.3

d142258

v4.10.3

Documentation v4.10.3: https://raw.githack.com/uiwjs/react-codemirror/dd5ae06/index.html
Comparing Changes: v4.10.2...v4.10.3

⛑ test: fix test case. f7cfc15 @jaywcjlove
🐞 fix(deps): update react monorepo to v18 (#22) aa74162 @renovate-bot
💄 chore(deps): update devDependencies. 4555da6 @jaywcjlove
📖 doc: Update README-zh.md. 8271e27 @jaywcjlove

Contributors

jaywcjlove and renovate-bot

Assets 2

09 Jun 08:03

github-actions

v4.10.2

cd55491

v4.10.2

Documentation v4.10.2: https://raw.githack.com/uiwjs/react-codemirror/d257ebb/index.html
Comparing Changes: v4.10.1...v4.10.2

💄 chore: update workflows config. 946754f @jaywcjlove
💄 chore(deps): Update devDependencies. e1ac41f @jaywcjlove
📖 doc(Layout): 移除文档中暂不支持的API (#25) e96ed45 @nullptr-z
📖 doc: 更新文档示例预览 (#28) 9ff49a6 @SunLxy
💄 chore: update workflows config. 0204f98 @jaywcjlove
🌍 website: update code preview. c54a65c @jaywcjlove
💄 chore(deps): update dependency lerna to v5 (#31) e4d6a42 @renovate-bot
💄 chore(deps): update dependency lint-staged to v13 (#32) e2d6bf2 @renovate-bot
💄 chore(deps): update dependency husky to v8 (#29) 925e55b @renovate-bot
💄 chore(deps): update dependency prettier to ~2.6.0 (#21) 61d3516 @renovate-bot
💄 chore: update workflows config. 2bc93e3 @jaywcjlove

Contributors

jaywcjlove, renovate-bot, and 2 other contributors

Assets 2

27 Feb 09:10

github-actions

v4.10.1

5ad1842

v4.10.1

v4.10.0...v4.10.1

📖 doc: Update core/README-zh.md 238efac @jaywcjlove

Contributors

jaywcjlove

Assets 2

27 Feb 08:58

github-actions

v4.10.0

608f0fc

v4.10.0

v4.9.16...v4.10.0

🌍 website: Fix codePen options errors. cc1d6c8 @jaywcjlove
💄 chore(deps): Update dependency @types/react to 17.0.39 04af9ec @jaywcjlove
🌍 website: update website/public/bundle.html cc5a972 @jaywcjlove
💄 chore: update workflows config. 7e0fe91 @jaywcjlove
💄 chore: add gitpod config. 04dc4e9 @jaywcjlove
🌟 feat: Add LayoutHeader/LayoutContent/LayoutSider/LayoutFooter. baf9901 @jaywcjlove
💄 chore(deps): Update dependency lint-staged to v12.3.4 (#8) 2e8186e @renovate-bot

import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';
// const { Header, Footer, Sider, Content } = Layout;
// Layout.Header = LayoutHeader
// Layout.Content = LayoutContent
// Layout.Sider = LayoutSider
// Layout.Footer = LayoutFooter

function Demo() {
  return (
    <Layout>
      <LayoutHeader>Header</LayoutHeader>
      <Layout>
        <LayoutContent>Content</LayoutContent>
        <LayoutSider>Sider</LayoutSider>
      </Layout>
      <LayoutFooter>Footer</LayoutFooter>
    </Layout>
  );
}

Contributors

jaywcjlove and renovate-bot

Assets 2

26 Feb 14:50

github-actions

v4.9.16

b946dd5

v4.9.16

v4.9.15...v4.9.16

📖 doc: Update README.md d8b710f @jaywcjlove
🌍 website: update website/public/index.html 6e780ef @jaywcjlove
🌍 website: add bundle example page. b64dd42 @jaywcjlove

Bundle Example: https://uiwjs.github.io/react-layout/bundle.html

Contributors

jaywcjlove

Assets 2

26 Feb 14:26

github-actions

v4.9.15

9c03a0d

v4.9.15

v4.9.14...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/standalone@7.17.x/babel.min.js" crossorigin></script>
    <script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17.x/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/react-layout@4.x/dist/layout.css">
  </head>
  <body>
    <div id="container" style="padding: 24px"></div>
    <script src="https://unpkg.com/@uiw/react-layout@4.x/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>