mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 13:47:02 +08:00
0062867274
* new Layout Component (#4087) * change Anchor type * new Layout * Component update && add snap * Revert "new Layout Component" (#4131) * add Layout (#4169) * add Layout * update * fix snapshot * Improve layout component 1. update demo code 2. drop `position` of Sider 3. improve demo style
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
export interface BasicProps {
|
|
style?: React.CSSProperties;
|
|
prefixCls?: string;
|
|
className?: string;
|
|
}
|
|
|
|
function generator(props) {
|
|
return (Basic) : any => {
|
|
return class Adapter extends React.Component<BasicProps, any> {
|
|
static Header: any;
|
|
static Footer: any;
|
|
static Content: any;
|
|
static Sider: any;
|
|
render() {
|
|
const { prefixCls } = props;
|
|
return <Basic prefixCls={prefixCls} {...this.props}/>;
|
|
}
|
|
};
|
|
};
|
|
}
|
|
|
|
class Basic extends React.Component<BasicProps, any> {
|
|
render() {
|
|
const { prefixCls, className, ...others } = this.props;
|
|
const divCls = classNames(className, prefixCls);
|
|
return (
|
|
<div className={divCls} {...others} />
|
|
);
|
|
}
|
|
}
|
|
|
|
const Layout = generator({
|
|
prefixCls: 'ant-layout',
|
|
})(Basic);
|
|
|
|
const Header = generator({
|
|
prefixCls: 'ant-layout-header',
|
|
})(Basic);
|
|
|
|
const Footer = generator({
|
|
prefixCls: 'ant-layout-footer',
|
|
})(Basic);
|
|
|
|
const Content = generator({
|
|
prefixCls: 'ant-layout-content',
|
|
})(Basic);
|
|
|
|
Layout.Header = Header;
|
|
Layout.Footer = Footer;
|
|
Layout.Content = Content;
|
|
|
|
export default Layout;
|