一：什么是Ant Design？

二：开始使用

三：布局

四：表格

一：什么是Ant Design？

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。

官网：https://ant.design/index-cn

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design 。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

特性：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 React 组件。
使用 TypeScript 构建，提供完整的类型定义文件。
全链路开发和设计工具体系。

二：开始使用

引入 Ant Design

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现， antd 被发布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件， antd 插件会帮你引入 antd 并实现按需编译。

在 confifig.js 文件中进行配置：

export default {
plugins: [['umi-plugin-react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能
}]
]
};

小试牛刀

接下来，我们开始使用 antd 的组件，以 tabs 组件为例，地址 https://ant.design/components/tabs-cn/

效果：

看下官方给出的使用示例：

import { Tabs } from 'antd';const TabPane = Tabs.TabPane;function callback(key) {
console.log(key);
}ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>,
mountNode);

下面我们参考官方给出的示例，进行使用：

创建 MyTabs.js 文件：

import React from 'react'
import {Tabs} from 'antd'const TabPane = Tabs.TabPane;const callback = (key) => {console.log(key);
}class MyTabs extends React.Component {render() {return (
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
)
}
}export default MyTabs;

效果：

到此，我们已经掌握了antd组件的基本使用。

三：布局

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>
);
}
}export default BasicLayout;

需要特别说明的是，在 umi 中约定的目录结构中， layouts/index.js 文件将被作为全局的布局文件。

接下来，配置路由：（非必须）

confifig.js 文件：

export default {plugins: [['umi-plugin-react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能
}]
],routes: [{path: '/',component: '../layouts' //配置布局路由
}]
};

进行页面访问：

可以看到，布局已经生成，只是样式优点丑。

子页面使用布局

前面所定义的布局是全局布局，那么，在子页面中如何使用这个全局布局呢？

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

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>{this.props.children}</Content><Footer>Footer</Footer></Layout></Layout>
);
}
}export default BasicLayout;

接下来配置路由（注意，在布局路由下面进行配置）：

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

export default {plugins: [['umi-plugin-react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能}]
],routes: [{path: '/',component: '../layouts', //配置布局路由routes: [ //在这里进行配置子页面{path: '/myTabs',component: './myTabs'
}
]
}]
};

进行访问测试：

可以看到，在MyTabs组件中已经应用了全局的布局。其他子页面也就同理了。

美化页面

接下来，对页面做一些美化的工作：

import React from 'react'
import { Layout } from 'antd';const { Header, Footer, Sider, Content } = Layout;class BasicLayout extends React.Component{render(){
return (<Layout><Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>Sider</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' }}>后台系统 ©2022 Created by 大唐霸业</Footer>
</Layout>
</Layout>
);
}
}export default BasicLayout;

效果：

引入导航条

使用 Menu 组件作为导航条： https://ant.design/components/menu-cn/

import React from 'react'
import {Layout, Menu, Icon} from 'antd';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={['2']}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'}}>后台系统 ©2018 Created by 大唐霸业</Footer></Layout></Layout>
);
}
}export default BasicLayout;

效果：

为导航添加链接

下面，我们对左侧的导航条添加链接，点击相应的链接在右侧进行相应页面的显示。

在 src 目录下创建 user 目录，并且在 user 目录下创建 UserAdd.js 和 UserList.js 文件，用于模拟实现新增用户和查询用户列表功能。

UserAdd.js ：

import React from 'react'class UserAdd extends React.Component{render(){
return (
<div>新增用户</div>
);
}
}export default UserAdd;

UserList.js ：

import React from 'react'class UserList extends React.Component{render(){
return (
<div>用户列表</div>
);
}
}export default UserList;

接下来，配置路由：

export default {plugins: [['umi-plugin-react', {dva: true, // 开启dva功能antd: true // 开启Ant Design功能}]],routes: [{path: '/',component: '../layouts', //配置布局路由routes: [{path: '/myTabs',component: './myTabs'},{path: '/user',routes: [{path: '/user/list',component: './user/UserList'},{path: '/user/add',component: './user/UserAdd'}]}]}]
};

为菜单添加链接：

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/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'}}>后台系统 ©2018 Created by 大唐霸业</Footer></Layout></Layout>);}}export default BasicLayout;

注意：这里使用了 umi 的 link 标签，目的是出现记录点击的菜单。

测试：

四：表格

基本用法

参考官方文档进行实现： https://ant.design/components/table-cn/

改造 UserList.js 页面：

import React from 'react'
import {Table, Divider, Tag, Pagination } from 'antd';const {Column} = Table;const data = [{
key: '1',
name: '张三',
age: 32,
address: '上海市',
tags: ['程序员', '帅气'],
}, {
key: '2',
name: '李四',
age: 42,
address: '北京市',
tags: ['屌丝'],
}, {
key: '3',
name: '王五',
age: 32,
address: '杭州市',
tags: ['高富帅', '富二代'],
}];class UserList extends React.Component {render() {return (<div><Table dataSource={data} pagination={{position:"bottom",total:500,pageSize:10, defaultCurrent:3}}><Columntitle="姓名"dataIndex="name"key="name"/><Columntitle="年龄"dataIndex="age"key="age"/><Columntitle="地址"dataIndex="address"key="address"/><Columntitle="标签"dataIndex="tags"key="tags"render={tags => (<span>{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}</span>)}/><Columntitle="操作"key="action"render={(text, record) => (<span><a href="javascript:;">编辑</a><Divider type="vertical"/><a href="javascript:;">删除</a></span>)}/></Table></div>);}
}export default UserList;

实现效果：

将数据分离到 model 中

model 的实现： UserListData.js

import request from "../util/request";export default {namespace: 'userList',state: {list: []},effects: {*initData(params, sagaEffects) {const {call, put} = sagaEffects;const url = "/ds/user/list";let data = yield call(request, url);yield put({type : "queryList",data : data});}},reducers: {queryList(state, result) {let data = [...result.data];return { //更新状态值list: data}}}
}

修改 UserList.js 中的逻辑：

import React from 'react';
import { connect } from 'dva';
import {Table, Divider, Tag, Pagination } from 'antd';const {Column} = Table;const namespace = 'userList';@connect((state)=>{return {data : state[namespace].list
}
}, (dispatch) => {return {initData : () => {dispatch({type: namespace + "/initData"});}}})class UserList extends React.Component {componentDidMount(){this.props.initData();}
render() {return (<div><Table dataSource={this.props.data} pagination={{position:"bottom",total:500,pageSize:10, defaultCurrent:3}}><Columntitle="姓名"dataIndex="name"key="name"/><Columntitle="年龄"dataIndex="age"key="age"/><Columntitle="地址"dataIndex="address"key="address"/><Columntitle="标签"dataIndex="tags"key="tags"render={tags => (<span>{                      tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}</span>)}/><Columntitle="操作"key="action"render={(text, record) => (<span><a href="javascript:;">编辑</a><Divider type="vertical"/><a href="javascript:;">删除</a></span>)}/></Table></div>
);
}
}export default UserList;

mock 数据： MockListData.js

export default {
'get /ds/list': function (req, res) {
res.json({
data: [1, 2, 3, 4],
maxNum: 4
});
},'get /ds/user/list': function (req, res) {
res.json([{
key: '1',
name: '张三1',
age: 32,
address: '上海市',
tags: ['程序员', '帅气'],
}, {
key: '2',
name: '李四',
age: 42,
address: '北京市',
tags: ['屌丝'],
}, {
key: '3',
name: '王五',
age: 32,
address: '杭州市',
tags: ['高富帅', '富二代'],
}]);
}
}

测试结果：

Ant Design入门相关推荐

Ant Design入门之介绍
Ant Design入门什么是Ant Design? Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用. 官网:https://ant.design/in ...
Ant Design入门之布局
布局 antd布局:https://ant.design/components/layout-cn/ 在后台系统页面布局中,往往是经典的三部分布局,像这样: 下面,我们通过antd组件来完成这个布局. ...
Ant Design入门之开始使用
引入Ant Design Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用. 在 umi 中,你可以通过在 ...
Ant Design 入门-引用自己命名的组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 自己创建的组件:代码 import { Table, Divider, Tag } from 'antd'; ...
Ant Design 入门-参照官方文档使用组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 先来一个按钮组件使用的对比,官方文档的(不能直接用)和实际能用的. 官网demo: import { Tabl ...
Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
Ant Design pro入门教程
Ant Design pro入门教程最近公司再开项目又要用antd 这次刚好给大家写一个入门安装教程 ( v5 typescript版本 ) 这套模板使用了react框架为基础哦 1. 准备环境 ...
Ant Design Pro入门
目录一:了解Ant Design Pro 二:快速入门一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
后端工程师入门Ant Design Pro
本文适用于后端程序员入门ant design pro,基于官方文档,不探讨底层,仅为实用,效果预览:https://preview.pro.ant.design/dashboard/analysis ...

Ant Design入门

一：什么是Ant Design？

二：开始使用

三：布局

四：表格

Ant Design入门相关推荐

最新文章

热门文章