布局

antd布局：https://ant.design/components/layout-cn/

在后臺系統頁面布局中，往往是經典的三部分布局，像這樣：

下面，我們通過antd組件來完成這個布局。

組件概述?

Layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header ：頂部布局，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。
Sider ：側邊欄，自帶默認樣式及基本功能，其下可嵌套任何元素，只能放在?Layout 中。
Content ：內容部分，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout?中。
Footer ：底部布局，自帶默認樣式，其下可嵌套任何元素，只能放在 Layout 中。

搭建整體框架

在src目錄下創建layouts目錄，并且在layouts目錄下創建index.js文件，寫入內容：

import React from 'react' import { Layout } from 'antd'; const { Header, Footer, Sider, Content } = Layout; class BasicLayout extends React.Component{render(){return (<Layout><Sider>Sider</Sider> <Layout><Header>Header</Header> <Content>Content</Content> <Footer>Footer</Footer> </Layout> </Layout> ); }

需要特別說明的是，在umi中約定的目錄結構中，layouts/index.js文件將被作為全局的布局文件。

接下來，配置路由：（非必須）?

config.js文件：

export default {plugins: [['umi‐plugin‐react', {dva: true, // 開啟dva功能antd: true // 開啟Ant Design功能}]],routes: [{path: '/',component: '../layouts' //配置布局路由}] }; import React from 'react'; import { Layout, Menu, Icon } from 'antd'; import Link from 'umi/link';const { Header, Footer, Sider, Content } = Layout; const SubMenu = Menu.SubMenu;class BasicLayout extends React.Component{constructor(props){super(props);this.state = {collapsed: false,}}render(){return (<Layout><Sider width={256} style={{minHeight: '100vh', color: 'white'}}><div style={{ height: '32px', background: 'rgba(255,255,255,.2)', margin: '16px'}}/><MenudefaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}mode="inline"theme="dark"inlineCollapsed={this.state.collapsed}><SubMenu key="sub1" title={<span><Icon type="user"/><span>用戶管理</span></span>}><Menu.Item key="1"><Link to="/user/UserAdd">新增用戶</Link></Menu.Item><Menu.Item key="2"><Link to="/user/UserList">新增列表</Link></Menu.Item></SubMenu></Menu></Sider><Layout><Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header><Content style={{ margin: '24px 16px 0' }}><div style={{ padding: 24, background: '#fff', minHeight: 360 }}>{this.props.children}</div></Content><Footer style={{ textAlign: 'center' }}>后臺系統 ?2018 Created by 中國深圳</Footer></Layout></Layout>)}}export default BasicLayout;

?

總結

以上是生活随笔為你收集整理的Ant Design入门之布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。