react-widget-layout

安装

npm install --save react-widget-layout

使用

import {Layout, Header, Content, Footer} from 'react-widget-layout';
import 'react-widget-layout/style'
 
export default () => {
    return (
        <Layout>
            <Header>Header</Header>
            <Content>Content</Content>
            <Footer>Footer</Footer>
        </Layout>
    );
}

Interface

interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
    /** 默认为：rw-layout */
    prefixCls?: string;
}

基本样式

.rw-layout {
    display: flex;
    flex-direction: column;
    flex: auto;
}
.rw-layout-has-sider {
    flex-direction: row;
}
 
.rw-layout-sider,
.rw-layout-header,
.rw-layout-footer {
    flex: 0 0 auto;
}
 
.rw-layout-content {
    flex: auto;
}