Ant Design of React

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。

带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总

结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和

『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者

专注于更好的用户体验。

 

 

 

Start

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发

布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd

插件会帮你引入 antd 并实现按需编译。

---

导入umi-plugin-react插件

#添加插件

yarn add umi-plugin-react --dev

config文件中开启dva,跟ant design功能

 

 

我们以Form表单为例,官网地址 https://ant.design/components/card-cn/

官方代码

import { Card } from 'antd'; ReactDOM.render( <div> <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> </div>, mountNode, );

 

效果如下

我们按照官方给的事例结合使用

创建MyCard.js文件

import React from 'react' import { Card } from 'antd' class MyCard extends React.Component{ render(){ return ( <div> <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}> <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> </div> ) } } export default MyCard;

布局

官网https://ant.design/components/layout-cn/

常用的布局结构

 

 

 

 

 

搭建整体布局结构

在umi约定的目录结构中,/src/layouts/index.js 文件将被作为全局布局配置文件

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

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

 

配置路由 (非必须)

config/config.js

//导出一个对象，暂时设置为空对象，后面再填充内容 export default { plugins: [ ['umi-plugin-react', { //暂时不启用任何功能 dva : true , //开启了dva功能, antd : true }] ], routes: [{ path:'/', component:'../layouts' }] };

进行页面访问：

引用子页面

在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。

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

 

配置路由(采用默认路由的可以忽略)

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。

 

进行访问测试：

 

所有的页面效果都是一样的

 

美化页面

import React from 'react'; import { Layout } from 'antd'; const { Header, Footer, Sider, Content } = Layout; class BasicLayer extends React.Component{ render(){ return ( <Layout> <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>E03</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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer> </Layout> </Layout> ) } } export default BasicLayer;

 

页面效果如下

 

 

左侧添加导航条

官网https://ant.design/components/menu-cn/

 

代码

import React from 'react'; import { Layout } from 'antd'; import { Menu, Icon, Button } from 'antd'; const { SubMenu } = Menu; const { Header, Footer, Sider, Content } = Layout; class BasicLayer extends React.Component{ constructor(props){ super(props); this.state = { collapsed: false } } render(){ return ( <Layout> <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}> <div style={{ width: 256 ,height:'32px',margin:'16px'}}> </div> <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.state.collapsed} > <Menu.Item key="1"> <Icon type="pie-chart" /> <span>Option 1</span> </Menu.Item> <Menu.Item key="2"> <Icon type="desktop" /> <span>Option 2</span> </Menu.Item> <Menu.Item key="3"> <Icon type="inbox" /> <span>Option 3</span> </Menu.Item> <SubMenu key="sub1" title={ <span> <Icon type="mail" /> <span>Navigation One</span> </span> } > <Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="6">Option 6</Menu.Item> <Menu.Item key="7">Option 7</Menu.Item> <Menu.Item key="8">Option 8</Menu.Item> </SubMenu> <SubMenu key="sub2" title={ <span> <Icon type="appstore" /> <span>Navigation Two</span> </span> } > <Menu.Item key="9">Option 9</Menu.Item> <Menu.Item key="10">Option 10</Menu.Item> <SubMenu key="sub3" title="Submenu"> <Menu.Item key="11">Option 11</Menu.Item> <Menu.Item key="12">Option 12</Menu.Item> </SubMenu> </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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer> </Layout> </Layout> ) } } export default BasicLayer;

 

为导航添加链接

需求:点击左侧导航栏右侧进入相应页面

创建俩个页面,用户添加,用户列表

 

配置路由(使用默认路由的可以忽略)

//导出一个对象，暂时设置为空对象，后面再填充内容 export default { plugins: [ ['umi-plugin-react', { //暂时不启用任何功能 dva : true , //开启了dva功能, antd : true }] ], routes:[{ path:'/', component:'../layouts', routes: [{ path:'/user', routes:[{ path:'/user/add', component: './user/UserAdd' },{ path:'/user/list', component:'./user/UserList' }] }] }] };

在路由index.js中引入链接组件

import Link from 'umi/link';//添加链接样式 <Link to="/user/list">用户列表</Link> <Link to="/user/add">用户添加</Link>

 

代码如下

import React from 'react'; import { Layout } from 'antd'; import Link from 'umi/link';//添加链接样式 import { Menu, Icon, Button } from 'antd'; const { SubMenu } = Menu; const { Header, Footer, Sider, Content } = Layout; class BasicLayer extends React.Component{ constructor(props){ super(props); this.state = { collapsed: false } } render(){ return ( <Layout> <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}> <div style={{ width: 256 ,height:'32px',margin:'16px'}}> </div> <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.state.collapsed} > <SubMenu key="sub1" title={ <span> <Icon type="mail" /> <span>用户管理</span> </span> } > <Menu.Item key="1"> <Link to="/user/list">用户列表</Link> </Menu.Item> <Menu.Item key="2"> <Link to="/user/add">用户添加</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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer> </Layout> </Layout> ) } } export default BasicLayer;

效果如图