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;
}