Ant Design 3.0.0 正式发布,大量修复和改进 - 开源中国社区
Ant Design 3.0.0 正式发布,大量修复和改进
王练 2017年12月05日

Ant Design 3.0.0 正式发布,大量修复和改进

王练 王练 发布于2017年12月05日 收藏 18

有免费的MySQL,为什么还要买? >>>  

Ant Design 3.0.0 正式发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的 UI 设计语言和 React 实现。

主要变化

  • 全新的色彩系统, 组件主色由 『#108EE9』 改为 『#1890FF』,新主色我们称之为“拂晓蓝”。

  • 全新的视觉样式和组件尺寸,更现代更美观。

  • 基础字体大小由 12px 增大到 14px

  • 默认语言由中文改为英文。

  • 全面支持 React 16。

  • 更友好的 TypeScript 支持。

  • 新的 List 组件。

  • 新的 Divider 组件。

  • 新增 30 个图标

不兼容改动

  • Card 的 noHovering 属性重命名为 hoverable,且默认值改为 true

  • 调整了 Grid 的响应式断点值。详见 #7230

  • Form getFieldDecorator 的 exclusive 参数被移除,此类场景应该由 Radio.Group、Checkbox.Group 之类的组件来完成。

  • 新增 Form.createFormField 方法,mapPropsToFields 返回的字段都需要由该方法创建。

    import { Form } from 'antd';
    
    Form.create({
      mapPropsToFields() {
        return {
    -     name: { value: 'antd' },
    +     name: Form.createFormField({ value: 'antd' }),
        };
      },
    })
  • 优化了全局的重置样式,如果升级后你的全局样式有问题,可以引入我们提供的 2.x 兼容样式。

    import 'antd/style/v2-compatible-reset';

    或者在 less 里引入

    @import '~antd/style/v2-compatible-reset.css';
  • 由于默认语言改为英文,如果你需要显示中文,现在需要配置 LocalProvider

    import { LocaleProvider } from 'antd';
    import zhCN from 'antd/lib/locale-provider/zh_CN';
    
    ReactDOM.render(
      <LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
      document.getElementById('root')
    );
  • Form 下的表单控件不再默认为 size="large"。

以下在 2.x 中废弃的特性被移除

  • 移除了 DatePicker.Calendar, 请直接使用 Calendar 组件。

  • 移除了 DatePicker 的 toggleOpen 属性, 请使用 onOpenChange 代替。

  • 移除了 Form 的 inlinehorizontalvertical 属性,请使用 layout 代替。

  • 移除了 Select 的 multipletagscombobox 属性,请使用 mode 代替。

  • 移除了 Input 对 type='textarea' 的支持,请直接使用 Input.TextArea 组件。

  • 移除了 Mention 的 toEditorState 方法,请使用 toContentState 代替。

新增功能及改进

  • Tabs 新增 size="large"

  • Row 的 gutter 属性新增响应式断点的支持,可以使用诸如 gutter={{ sm: 16, lg: 32 }} 的设置。

  • Spin 新增 indicator 属性,用于设置自定义的加载指示符。 #7977 @kossel

  • Input.Search 新增 enterButton 用于设置自定义的搜索图标。#7596

  • Mention 新增 placement, 用于设置下拉框的弹出方向。

  • Carousel 新增 next()prev()goTo(slideNumber) 方法,用于控制面板展示。

  • Button 新增链接支持,当提供 href 时会自动渲染为 <a>#8343

  • Steps 进行了重构,首次渲染的时候不会再闪烁。 #6010

  • Switch 新增 loading 属性,用于表现加载中的状态。

  • Menu

    • 新增 subMenuOpenDelay 和 subMenuCloseDelay,用于设置子菜单打开和关闭的延迟。

    • 新增 forceSubMenuRender,用于强制渲染子菜单。#5586

  • Form

    • 新增显示验证信息时的动画效果。

    • 新增按条件渲染表单项的支持。#react-component/117

  • Message

  • Badge

    • 新增 offset 属性,用于设置状态点的位置偏移。

    • status 允许与 children 同时使用。#8164

  • Card

    • 新增 inner 类型。例子

    • 新增 coveractions 以及 Meta 子组件。例子

  • DatePicker

    • 新增 mode 和 onPanelChange,用户控制面板的展示模式。例子

    • 新增 WeekPicker 子组件。例子

    • 新增 dateRender 属性,用于自定义日期单元格的渲染。

  • TimePicker

    • 新增 hourStepminuteStepsecondStep,用于设置时间步长。例子

    • 新增 focusOnOpen,用于设置在打开面板的时候是否聚焦输入框。

  • Table

    • 新增 components 属性,用于覆盖表格元素的默认标签。

      // 支持覆盖的元素
      const components = {
        table: MyTable,
        header: {
          wrapper: HeaderWrapper,
          row: HeaderRow,
          cell: HeaderCell,
        },
        body: {
          wrapper: BodyWrapper,
          row: BodyRow,
          cell: BodyCell,
        },
      };
      
      <Table components={components} columns={columns data={data}}  />
    • 新增 onRow 属性,用于设置表格列的属性。

    • 新增 onHeaderRow,用户设置表格头部列的属性。

    • 新增 column[onCell],用户设置单元格的属性。

    • 新增 column[onHeaderCell],用于设置头部单元格的属性。

    • 新增 column[align],用于设置列内文字的对其方向。

    • 新增 column[defaultSortOrder],用于设置列的默认排序。#8111 @megawac

    • 新增 rowSelection[fixed],用于固定选择列。

    • 废弃 getBodyWrapper,请使用 components 属性代替。

    • 废弃以下属性 onRowClickonRowDoubleClickonRowContextMenuonRowMouseEnteronRowMouseLeave,请使用 onRow 代替。

      <Table onRow={(record) => ({
        onClick: () => {},
        onDoubleClick: () => {},
        onContextMenu: () => {},
        onMouseEnter: () => {},
        onMouseLeave: () => {},
      })} />
  • Select

    • 默认和多选模式下 Option 的值允许使用 number。

    • 新增 maxTagCount 和maxTagPlaceholder`,用与设置最多可显示的选中项。

    • 新增 showAction,用于设置出发下拉框打开的事件。

    • 新增 onMouseEnter 和 onMouseLeave 事件回调。

  • LocaleProvider

Bug 修复

  • Form

    • 修复输入框的图标会被验证图标覆盖的问题。

    • 修复使用大尺寸输入框时,验证图标不居中的问题。

  • 修复 Menu 按键时的报错。#8089

其他

  • 在 TypeScript 中使用时不再需要设置 allowSyntheticDefaultImports

  • 从 peerDependencies 中移除了 react@0.14 和 react@15,虽然目前 antd 3.0.0 依然可以在旧版本的 React 上使用,但是我们在未来有可能使用 React 16 的新特性,所以强烈建议升级到 React 16,见升级文档

  • 全面支持 ES Module ,antd 及其依赖的底层 react-component 组件全部提供了 ES Module 的构建版本,如果你使用 webpack 3,可以把 babel-import-plugin 的 libraryDirectory 设置为 es,以获得 Tree Shaking 的优化效果。

  • 最后,我们会继续维护 2.x 的分支到明年 6 月份。

更多内容见 Ant Design 3.0 发布公告

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:Ant Design 3.0.0 正式发布,大量修复和改进
分享
评论(40)
精彩评论
15
可怜我们做后端的,玩不转这些高级前端货,只能后端输出纯html+bootstrap.
感觉不前后端一起弄跟不上时代了.
9
默认语言由中文改为英文。。。。。。。。。。。。。
5
目前最好的前端框架 :thumbsup:
4
antd 3.0.0 期待你很久了!
1

引用来自“绿薯”的评论

其实很多react项目或者vue的国产框架组件库感觉标题都是吹出来的.
没有比ant的table组件多功能.就不要老发什么更新新闻了.增加那么几个渲染出来的组件就发布版本,1年后就烂尾了.
别人真的让人入手后就发现坑了,
这里就不举例了.开源中国多得是.我不反对开源精神(很多人非要重复做个轮子是有目的).但是文案有节操就好.
做为后台系统ant-design + nodejs鲁api接口 前后端代码复用率超高 复杂的系统中间rpc语言过度合并
感觉才是敏捷开发.还在撸html的.可能旧项目真的是太大了如果改需求你懂的
技术变好,没理由不学习,
至于ant是否是KPI的产物.感觉目前前端组件框架来说最实用.更新着了也看到它3.0的变化

说前端组件化 谁做的过extjs
最新评论
0

引用来自“绿薯”的评论

顺便说下
Ant Design Pro 谨慎使用
Ant Design Mobile 谨慎使用
dva - 应用框架 谨慎使用
AntV - 数据可视化 谨慎使用
Egg - 企业级 Node 开发框架 谨慎使用
Ant Design 做后台强烈推荐.目前react最好的后台组件.

引用来自“错觉”的评论

能说说为什么 谨慎使用 那几个组件吗? pro 看着不错啊, 不过, 刚出还不推荐在生产环境使用罢了, 未来没问题的
dva 我觉得用的人不多, 除非用 antd, 要不谁用他, 原始的 redux 用的比较广泛
看了下文档.Ant Design Pro 是下面几个的合成体来..其实react发展那么快.依赖太多第三方库也不安全.到时候更新速度明显比不上.我基本会参考里面的代码.但不会直接使用.怎么说.大公司写得代码还是分规范合理..但是依赖太多他们的框架也不知道哪天KPI发完就完了.
0

引用来自“绿薯”的评论

其实很多react项目或者vue的国产框架组件库感觉标题都是吹出来的.
没有比ant的table组件多功能.就不要老发什么更新新闻了.增加那么几个渲染出来的组件就发布版本,1年后就烂尾了.
别人真的让人入手后就发现坑了,
这里就不举例了.开源中国多得是.我不反对开源精神(很多人非要重复做个轮子是有目的).但是文案有节操就好.
做为后台系统ant-design + nodejs鲁api接口 前后端代码复用率超高 复杂的系统中间rpc语言过度合并
感觉才是敏捷开发.还在撸html的.可能旧项目真的是太大了如果改需求你懂的
技术变好,没理由不学习,
至于ant是否是KPI的产物.感觉目前前端组件框架来说最实用.更新着了也看到它3.0的变化

引用来自“带刀的麦兜”的评论

说前端组件化 谁做的过extjs
哈哈.为已经错过那个阶段了.大学本身是后端java.就很少接触extjs.配置太困难放弃了.后来差不多毕业后13年.整个前端都大变样了.react vue ng 那些都很少推荐去学extjs.还不如BS来撸
0

引用来自“绿薯”的评论

顺便说下
Ant Design Pro 谨慎使用
Ant Design Mobile 谨慎使用
dva - 应用框架 谨慎使用
AntV - 数据可视化 谨慎使用
Egg - 企业级 Node 开发框架 谨慎使用
Ant Design 做后台强烈推荐.目前react最好的后台组件.
能说说为什么 谨慎使用 那几个组件吗? pro 看着不错啊, 不过, 刚出还不推荐在生产环境使用罢了, 未来没问题的
dva 我觉得用的人不多, 除非用 antd, 要不谁用他, 原始的 redux 用的比较广泛
1

引用来自“绿薯”的评论

其实很多react项目或者vue的国产框架组件库感觉标题都是吹出来的.
没有比ant的table组件多功能.就不要老发什么更新新闻了.增加那么几个渲染出来的组件就发布版本,1年后就烂尾了.
别人真的让人入手后就发现坑了,
这里就不举例了.开源中国多得是.我不反对开源精神(很多人非要重复做个轮子是有目的).但是文案有节操就好.
做为后台系统ant-design + nodejs鲁api接口 前后端代码复用率超高 复杂的系统中间rpc语言过度合并
感觉才是敏捷开发.还在撸html的.可能旧项目真的是太大了如果改需求你懂的
技术变好,没理由不学习,
至于ant是否是KPI的产物.感觉目前前端组件框架来说最实用.更新着了也看到它3.0的变化

说前端组件化 谁做的过extjs
1

引用来自“國際閒人”的评论

麻蛋,我有easyUI,一样玩转前端,非得搞得这么重
现在前端确实太复杂了,不过我觉得对人员结构还是挺不错了,前后分离分工明确,一人一岗,提供就业岗位:laughing::laughing:
0
学习成本很高啊~~
0
还不如用angular2版本的可以任意兼套各种bootstrap框架,而且已经和写laravel没有什么区别。
0
顺便说下
Ant Design Pro 谨慎使用
Ant Design Mobile 谨慎使用
dva - 应用框架 谨慎使用
AntV - 数据可视化 谨慎使用
Egg - 企业级 Node 开发框架 谨慎使用
Ant Design 做后台强烈推荐.目前react最好的后台组件.
1
其实很多react项目或者vue的国产框架组件库感觉标题都是吹出来的.
没有比ant的table组件多功能.就不要老发什么更新新闻了.增加那么几个渲染出来的组件就发布版本,1年后就烂尾了.
别人真的让人入手后就发现坑了,
这里就不举例了.开源中国多得是.我不反对开源精神(很多人非要重复做个轮子是有目的).但是文案有节操就好.
做为后台系统ant-design + nodejs鲁api接口 前后端代码复用率超高 复杂的系统中间rpc语言过度合并
感觉才是敏捷开发.还在撸html的.可能旧项目真的是太大了如果改需求你懂的
技术变好,没理由不学习,
至于ant是否是KPI的产物.感觉目前前端组件框架来说最实用.更新着了也看到它3.0的变化

0

引用来自“杨军军”的评论

目前最好的前端框架 :thumbsup:

引用来自“爱开源的小学生”的评论

iview呢
还有这个fish-ui
0

引用来自“王丰cool”的评论

会不会又是一个KPI产品呢
hehe
0

引用来自“回去干活”的评论

可怜我们做后端的,玩不转这些高级前端货,只能后端输出纯html+bootstrap.
感觉不前后端一起弄跟不上时代了.
其实很简单,就是vlct和数据渲染的关系。不过前端的东西太杂了
0

引用来自“杨军军”的评论

目前最好的前端框架 :thumbsup:

引用来自“爱开源的小学生”的评论

iview呢
cordova 流行吗?现在android开发用什么?
1
js拼接html的语法真是看着就蛋疼,难怪vue比react火
0

引用来自“杨军军”的评论

目前最好的前端框架 :thumbsup:
iview呢
0

引用来自“gowk”的评论

我想知道跟 ant pro 有啥区别
ant pro就是拿它撸了个后台模板。顺便封装几个自己的组件。
0
会不会又是一个KPI产品呢
0
这个叼
0

引用来自“回去干活”的评论

可怜我们做后端的,玩不转这些高级前端货,只能后端输出纯html+bootstrap.
感觉不前后端一起弄跟不上时代了.

引用来自“MrXionGe”的评论

为什么要后台输出呢??
不前后分离吗?

引用来自“回去干活”的评论

技术 不够撒,弄不好.
现在的前端技术很好学的啊,随便找一个vuejs的整合就可以开发了
0

引用来自“回去干活”的评论

可怜我们做后端的,玩不转这些高级前端货,只能后端输出纯html+bootstrap.
感觉不前后端一起弄跟不上时代了.

引用来自“MrXionGe”的评论

为什么要后台输出呢??
不前后分离吗?
技术 不够撒,弄不好.
顶部