标签：ES6 布局 ReactJs js Ant 2.3 Design 组件 antd
2.1、什么是Ant Design？
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。官网：https://ant.design/index-cn
设计语言：
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 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组件为例，地 址：https://ant.design/components/tabs-cn/
效果：
看下官方给出的使用示例：
下面我们参考官方给出的示例，进行使用： 创建MyTabs.js文件：
到此，我们已经掌握了antd组件的基本使用。
2.3、布局
antd布局：https://ant.design/components/layout-cn/
在后台系统页面布局中，往往是经典的三部分布局，像这样：
下面，我们通过antd组件来完成这个布局。
2.3.1、组件概述
：布局容器，其下可嵌套 或 本身，可以放在任何父容器中。
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组件作为导航条：https://ant.design/components/menu-cn/
2.3.6、为导航添加链接
下面，我们对左侧的导航条添加链接，点击相应的链接在右侧进行相应页面的显示。
在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于 模拟实现新增用户和查询用户列表功能。
UserAdd.js：
UserList.js：
接下来，配置路由：
为菜单添加链接：
注意：这里使用了umi的link标签，目的是出现记录点击的菜单。
测试：
2.4.1、基本用法
参考官方文档进行实现：https://ant.design/components/table-cn/ 改造UserList.js页面：
实现效果：
2.4.2、将数据分离到model中
model的实现：UserListData.js
修改UserList.js中的逻辑：
mock数据：MockListData.js
就叫一片白纸
发布了195 篇原创文章 · 获赞 47 · 访问量 7万+
私信
关注
标签：ES6,布局,ReactJs,js,Ant,2.3,Design,组件,antd 来源： https://blog.csdn.net/qq_33591055/article/details/104450083
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。