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;
效果如图