【ES6+ReactJs】第4章： Ant Design

【ES6+Reactjs】第4章： Ant Design

2.1、什么是Ant Design？ Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。官网：Ant Design。基于『确定』和 『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。 特性：

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

2.2、开始使用

2.2.1、引入Ant Design

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

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

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

2.2.2、小试牛刀 接下来，我们开始使用antd的组件，以tabs组件为例，地 址：创建MyTabs.js文件：

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

2.3、布局 antd布局：或 本身，可以放在任何父容器中。 Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 中。Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout 中。 Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在中。 ：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 中。

2.3.2、搭建整体框架

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

接下来，配置路由：（非必须）config.js文件：

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

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

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

2.3.4、美化页面

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

2.3.5、引入导航条

使用Menu组件作为导航条：改造UserList.js页面：

实现效果：

2.4.2、将数据分离到model中

model的实现：UserListData.js

修改UserList.js中的逻辑：

mock数据：MockListData.js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。