Package Exports

@uiw/react-layout
@uiw/react-layout/cjs/index.js
@uiw/react-layout/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Layout

Handling the overall layout of a page.

⚠️ Note: Implemented with flex layout, please pay attention to browser compatibility issues.

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

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } 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 (
    <div>
      <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>
        <Header style={stylHeader}>Header</Header>
        <Layout>
          <Content style={stylConten}>Content</Content>
          <Sider style={stylSider}>Sider</Sider>
        </Layout>
        <Footer>Footer</Footer>
      </Layout>

      <Layout>
        <LayoutHeader style={stylHeader}>Header</LayoutHeader>
        <Layout>
          <LayoutContent style={stylConten}>Content</LayoutContent>
          <LayoutSider style={stylSider}>Sider</LayoutSider>
        </Layout>
        <LayoutFooter>Footer</LayoutFooter>
      </Layout>
    </div>
  );
}

export default Demo;

Layout top-middle-bottom

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from '@uiw/react-layout';
const { Header, Footer, Sider, Content } = Layout;

const stylHeader = { color: '#fff' }
const stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }

function Demo() {
  const [collapsed, setCollapsed] = React.useState(false)
  return (
    <Layout style={{ marginBottom: 20 }}>
      <Header style={stylHeader}>Header</Header>
      <Content style={stylConten}>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
  );
}

export default Demo;

Layout left-right

import React from 'react';
import ReactDOM from 'react-dom';
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 (
    <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>
  );
}

export default Demo;

Layout

The layout wrapper, in which Header Sider Content Footer or Layout itself can be nested, and can be placed in any parent container.

Header: The top layout with the default style, in which any element can be nested, and must be placed in Layout.
Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in Layout.
Content: The content layout with the default style, in which any element can be nested, and must be placed in Layout.
Footer: The bottom layout with the default style, in which any element can be nested, and must be placed in Layout.

Property	Description	Type	Default
className	Container className	string	-
style	To customize the styles	CSSProperties	-
hasSider	hasSider Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering	boolean	-

Layout.Sider

Property	Description	Type	Default
className	Container className	string	-
style	To customize the styles	CSSProperties	-
collapsed	To set the current status	boolean	-
collapsedWidth	Width of the collapsed sidebar, by setting to 0 a special trigger will appear	boolean	`80`
width	Width of the sidebar	number/string	200

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.