使用dva+umi+antd构建页面(二)
上次基于官网教程可以成功访问页面,并且做出列表页面,本次基于一个新的项目构建页面布局
布局
参考网址:https://ant.design/components/layout-cn/
在官网选择一种布局选项,覆盖自己src/layouts/index.js中的内容即可
layouts/index.js
import React from 'react'
import {
Layout, Menu, Icon } from 'antd';
import styles from './index.css';
const {
Header, Sider, Content } = Layout;
class BasicLayout extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render() {
return (
<Layout>
<Sider
trigger={
null}
collapsible
collapsed={
this.state.collapsed}
>
<div className={
styles.logo} />
<Menu theme="dark" mode="inline" defaultSelectedKeys={
['1']}>
<Menu.Item key="1">
<Icon type="user" />
<span>nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span>nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span>nav 3</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={
{
background: '#fff', padding: 0 }}>
<Icon
className={
styles.trigger}
type={
this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={
this.toggle}
/>
</Header>
<Content style=