Ant Design 3.0.0 正式发布,大量修复和改进_狼牙冷的博客-程序员宅基地

技术标签: 随记  Ant Design  

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

转载请注明:文章转载自 开源中国社区 [ http://www.oschina.net]

主要变化

  • 全新的色彩系统, 组件主色由 『#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 中移除了 [email protected] 和 [email protected],虽然目前 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 发布公告


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jimolangyaleng/article/details/83304852

智能推荐

用Java对文件进行重命名_请叫我益达张的博客-程序员宅基地

昨天闲来无事,对磁盘进行了整理。当整理到F盘(放的都是电影之类的)时发现好多电影文件名字前面都有一些标识,我经常在电影天堂上下载电影,所以下载的电影名前面都会有[电影天堂www.dy2018.com]、[电影天堂www.dy2018.net]等字样,感觉很不爽。于是我就想把这些字样去掉,可是程序猿都有一些懒,我也不例外,那么多懒得一个个删除,又懒得去网上找那些批量修改文件名的软件,就想到写个程序。

php 图片处理 旋转,php图像处理(缩放、剪裁、缩放、翻转、旋转、透明、锐化)..._weixin_39901332的博客-程序员宅基地

本文章来给各同学总结了一些常用的图像处理函数,包括有缩放、剪裁、缩放、翻转、旋转、透明、锐化功能,大家可参考参考。注意事项:如果要使用php gd处理我们需要开启gd库Windows下开启PHP的GD库支持找到php.ini,打开内容,找到:;extension=php_gd2.dll把最前面的分号“;”去掉,再保存即可,如果本来就没有分号,那就是已经开启了。linux开启GD库##检测GD库是否...

SSH框架学习语录二:关注框架都有的xml配置文件和反射_我是一道光_的博客-程序员宅基地_ssh框架都要建立什么xml文件

每个牛逼的框架设计的背后都有一群头脑灵活、闷骚幽默的人。他们对待工作乐观积极,总是能拿出有效的解决方案来处理那些棘手难解的问题。         近来越发的感觉到配置文件的强大之处,也佩服第一个尝试着用这种方式分解变化、消减 耦合的程序猿。层出不穷的框架,都是有着各自的特殊使命,带着不同的解决方案在项目中大放异彩。可能我们更多在使用着框架,没多想过每一个框架都有着自己独特的设计思想,都有博人眼球的

python 读取csv文件时有空行_用Python编写的CSV文件在每一行之间都有空行。_weixin_39709262的博客-程序员宅基地

用Python编写的CSV文件在每一行之间都有空行。import csvwith open('thefile.csv', 'rb') as f:data = list(csv.reader(f))import collectionscounter = collections.defaultdict(int)for row in data:counter[row[10]] += 1with open...

【转载】Nodejs异步流程控制Async_huang_sir_91的博客-程序员宅基地

前言:    最近在新公司接触到的项目用的版本比较的node。因此没有es6的一些特性,如promise/await等。网上查找到的一篇很好的介绍async的api的文章。在这里转载一下。方便以后查看http://blog.fens.me/nodejs-async/Nodejs异步流程控制Async从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架w...

httpsqs 非常小的轻量级消息队列服务_任亚军的博客-程序员宅基地

优点:1、基于HTTP协议,非常简单 2、速度很快。 3、支持多种接口。   缺点:不支持阻塞式消息读取。

随便推点

信息系统规划方法-Zachman框架_gonewithwind818的博客-程序员宅基地_信息系统规划方法

Zachman框架分为5个层次,代表不同类型的项目涉众的看法和观点,同时明确了企业架构工作的流程和流程承担者。 第一行是企业的管理层,是企业的规划和管理人员的范畴,定义了组织的方向和目的,以及架构工作的边界,明确架构所支持的业务范围,规划系统在功能、性能和成本等方面的整体要求。 第二行是企业的业务层,是系统的拥有者范畴,用业务术语来定义组织的...

实例和对象_ladliu的博客-程序员宅基地

这两种的区别是什么?类-->对象-->实例 人类是类 某个人是对象 你是实例 实例本身也是对象。 表现出来是这样的 String 类 String str str是对象 String str = "abc"; "abc"是实例,也是对象. 这样也能解释instance of object这种说法 str的实例是"abc" 那可以理解为实例是对象拥有了数据就构成了实例,如果一个对象他没有

Android之条形码、二维码扫描框架(非原创)_weixin_30402343的博客-程序员宅基地

文章大纲一、条形码、二维码扫描框架介绍二、条形码、二维码的区别和组成结构介绍三、条形码、二维码扫描框架应用场景四、BGAQRCode-Android框架实战五、项目源码下载六、参考文章一、条形码、二维码扫描框架介绍Android二维码扫描是一种常见的功能开发,但是技术选型不当会造成初期开发难度大、后期维护成本高。常见的Android二维码扫码解决方案很多,比如ZXing,b...

React Native Application和Activity源码分析_Jesse-csdn的博客-程序员宅基地

基于V0.43.3版本 React Native Android端的ReactApplication和ReactActivity的实现原理.

使用AWS SDK for Java创建并启动EC2实例_十豆彡v彡的博客-程序员宅基地_aws sdk 启动实例

本文主要记录如何使用AWS SDK for Java来创建并启动EC2实例

LimeSDR实验教程(10) DVB-S发射和接收_老邵的开源世界的博客-程序员宅基地

我在windows下实现了dvb-s的发射和接收。发射使用的是limesdr-mini,接收使用的是hackrf/limesdr-usb。这次和以前的dvb-t发射不同,这次的发射和接收都是用软件实现的,并且都是开源的,以前的dvb-t接收机虽然是rtlsdr,但是是用芯片解调的dvb-t。不过接收机是sdrangel,有点难编译,并且datv express编译好的版本好像也只有wi...

推荐文章

热门文章

相关标签