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

    4.9.7 • Public • Published

    Layout 布局

    协助进行页面级整体布局。

    ⚠️ 注意:采用 flex 布局实现,请注意浏览器兼容性问题。

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

    基本用法

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Layout, Divider } from 'uiw';
    const { Header, Footer, Sider, Content } = Layout;
    
    const stylHeader = { color: '#fff' }
    const stylSider = { background: '#484a4e', color: '#fff', lineHeight: `120px`, textAlign: 'center' }
    const stylConten = { textAlign: 'center', background: 'rgba(16, 142, 233, 1)', minHeight: 120, lineHeight: '120px', color: '#fff' }
    
    function Demo() {
      const [collapsed, setCollapsed] = React.useState(false)
      return (
        <div>
          <Layout>
            <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>
            <Layout>
              <Header style={stylHeader}>
                <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '展开 Sider' : '缩进 Sider'}</button>
              </Header>
              <Content style={stylConten}>Content</Content>
              <Footer>Footer</Footer>
            </Layout>
          </Layout>
    
          <Divider />
    
          <Layout>
            <Header style={stylHeader}>Header</Header>
            <Content style={stylConten}>Content</Content>
            <Footer>Footer</Footer>
          </Layout>
    
          <Divider />
          
          <Layout>
            <Header style={stylHeader}>Header</Header>
            <Layout>
              <Sider style={stylSider}>Sider</Sider>
              <Content style={stylConten}>Content</Content>
            </Layout>
            <Footer>Footer</Footer>
          </Layout>
    
          <Divider />
    
          <Layout>
            <Header style={stylHeader}>Header</Header>
            <Layout>
              <Content style={stylConten}>Content</Content>
              <Sider style={stylSider}>Sider</Sider>
            </Layout>
            <Footer>Footer</Footer>
          </Layout>
        </div>
      );
    }
    
    ReactDOM.render(<Demo />, _mount_);

    Layout

    布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。

    • Header:顶部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    • Sider:侧边栏,自带默认样式及基本功能,其下可嵌套任何元素,只能放在 Layout 中。
    • Content:内容部分,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    • Footer:底部布局,自带默认样式,其下可嵌套任何元素,只能放在 Layout 中。
    参数 说明 类型 默认值
    className 容器 className string -
    style 指定样式 CSSProperties -
    theme 主题颜色 lightdark dark
    hasSider 表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 boolean -

    Layout.Sider

    参数 说明 类型 默认值
    className 容器 className string -
    style 指定样式 CSSProperties -
    collapsed 当前收起状态 boolean -
    collapsedWidth 收缩宽度,设置为 0 boolean 80
    width 宽度 number/string 200

    Install

    npm i @uiw/react-layout

    DownloadsWeekly Downloads

    186

    Version

    4.9.7

    License

    MIT

    Unpacked Size

    63 kB

    Total Files

    49

    Last publish

    Collaborators

    • wcjiang