【React+Typescript+Antd】界面框架布局——Layout布局+ Grid栅格
【React+Typescript+Antd】界面框架布局——Layout布局+ Grid栅格
毛大姑娘
发布于 2020-09-10 15:45:12
发布于 2020-09-10 15:45:12
【React+Typescript+Antd】界面框架布局是页面的骨架，骨架搭好了，之后就是细枝末节的填充。
新手上路，拿到项目的第一步就是画界面，但是对于复杂的页面如何能够做到页面架构清晰又不互相干扰呢？
Antd的Layout布局能够很好地解决这个问题。
它定义了Header（页头）、Content（内容）、Footer（页脚）、Sider（导航）等页面整体框架结构。你可以在这个框架结构基础上，再结合Antd的Grid栅格布局，几乎可以应付所有复杂的页面。
之前我不理解为什么官方把Grid栅格和Layout布局放在一块，现在才发现，他们只有配合使用才能发挥出更大的作用。
下面是我页面的布局：
像类似这样的页面，就需要用到Layout布局下的所有组件：Header、Content、Footer、Sider，在Content里面需要运用Grid里的Row+Col（24栅格）来调整大体上的左右布局。
到这里整体架构就形成了，最后将每个板块作为组件依次导入即可。
Content里的页面代码如下：
import React from "react";
import "./MainPage.css";
import { Layout, Row, Col } from "antd";
import MainHeader from "./MainHeader";
import PanelMain from "./PanelMain";
import PanelLint from "./PanelLint";
import PanelAutoTest from "./PanelAutoTest";
import PanelCommit from "./PanelCommit";
import PanelCodeReview from "./PanelCodeReview";
import PanelMember from "./PanelMember";
const { Header, Content, Footer, Sider } = Layout;
class MainPage extends React.Component<any> {
render() {
return (
<Layout className="body">
<Header className="header" style={{ background: '#fff', padding: 0, height: 152 }}>
<MainHeader />
</Header>
<Content style={{ background: 'none', padding: 0, margin: 24 }}>
<div className="content">
<Row >
<Col span="16">
<div className="main-left">
<PanelMain jumpFunc={this.props.jumpFunc} />
</div>
<div className="main-left">
<PanelLint />
</div>
<div className="main-left">
<PanelAutoTest />
</div>
</Col>
<Col span="8" className="cloumn">
<div className="main-right">
<PanelCommit />
</div>
<div className="main-right">
<PanelCodeReview />
</div>
<div className="main-right">
<PanelMember />
</div>
</Col>
</Row>
</div>
</Content>
</Layout>
);
}
}
export default MainPage;注：Antd组件对于样式修改有一定局限性，新增class添加样式并不能起作用，一些常用属性（如：height、width、padding等）需要通过行内style样式才能生效。
以上就是页面布局的内容，欢迎留言交流。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年11月05日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读