Nine Parsecs from Milwaukee

    @uiw/react-layout
    TypeScript icon, indicating that this package has built-in type declarations

    4.10.3 • Public • Published

    Layout

    NPM Downloads Build & Deploy Open in unpkg npm version Coverage Status Open in Gitpod

    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.

    Install

    npm i @uiw/react-layout

    DownloadsWeekly Downloads

    180

    Version

    4.10.3

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    55

    Last publish

    Collaborators

    • uiwjs
    • wcjiang