Skip to content
Changelog Hub

antd 3.0.0

npm / antd / 3.0.0 source ↗

2017-12-04

Learn more in the Ant Design 3.0 announcement post!

Major Changes

  • New color system, We changed our primary color from 『#108EE9』 to 『#1890FF』, we called the new primary color "拂晓蓝(Daybreak blue)" which means the color of the sky at daybreak.
  • New design of components.
  • Increased the base font size from 12px to 14px.
  • Changed default locale to en_US.
  • Support React 16.
  • Better TypeScript support.
  • New List component.
  • New Divider component.
  • 30 New icons.

Breaking Changes

We provide a migration tool to help you find deprecated usages in your codebase.

  • Card's noHovering has been renamed to hoverable，and its default value now is true.

  • Added new Grid breakpoints. #7230

  • Form getFieldDecorator's exclusive option has been removeed.

  • Added Form.createFormField, and you must use it to wrap field data returned in option.mapPropsToFields:

    import { Form } from 'antd';

Form.create({
  mapPropsToFields() {
    return {
-     name: { value: 'antd' },
+     name: Form.createFormField({ value: 'antd' }),
    };
  },
})

  • Improved global reset style, if you encounter style problem after upgrading, you can try import our v2 compatible style.

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

    Or use less

    @import '~antd/lib/style/v2-compatible-reset.css';

  • Since we changed default locale to en_US, LocalProvider is not required any more for English users.

  • We don't set size="large" to Input in Form by default any more.

  • UMD version of dist/antd.js doesn't include moment any more, you need add moment by yourself if you are using the UMD version.

    <html>
  <head>
+   <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
    <script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
  </head>
</html>

Removed Deprecations

  • 🗑 DatePicker.Calendar has been removed, you can use Calendar directly.
  • 🗑 DatePicker's toggleOpen prop has been removed, use onOpenChange instead.
  • 🗑 Form's inline, horizontal, vertical props has been removed, use layout instead.
  • 🗑 Input's type prop has dropped textarea support, please use Input.TextArea instead.
  • 🗑 Mention's toEditorState has been removed.
  • 🗑 Select's multiple, combobox, tags props has been removed, use mode instead.

Features and Improvements

  • 🌟 Tabs added new size size="large"。
  • 🌟 Row's gutter now support responsive setting, you can write gutter={{ sm: 16, lg: 32 }}.
  • 🌟 Spin added new indicator prop to allow setting custom indicator. #7977 @kossel
  • 🌟 Input.Search added new enterButton prop to allow setting custom search button.#7596
  • 🌟 Mention added new placement prop to allow setting the popup direction.
  • 🌟 Carousel added new next(), prev(), goTo(slideNumber) methods to allow controlling slides programmatically.
  • 🌟 Button added link support，Button with href prop will render to <a>. #8343
  • 🌟 Steps was refactored, first rendering won't flash. #6010
  • 🌟 Switch added new loading prop to show a loading status.
  • Menu
    • 🌟 Added new subMenuOpenDelay and subMenuCloseDelay props to allow setting delay time for submenu toggling.
    • 🌟 Added new forceSubMenuRender prop to render submenu even if it's collapsed. #5586
  • Form
    • 🌟 Added animations for validation message showing.
    • 🌟 Added field conditional rendering support. #react-component/117
  • Message
  • Badge
    • 🌟 Added new offset prop to allow setting the offset of status point.
    • 🌟 status can use whith children now. #8164
  • Card
    • 🌟 Added new inner type. Demo。
    • 🌟 Added cover、actions and a new Meta component. Demo。
  • DatePicker
    • 🌟 Added mode and onPanelChange，to allow controlling the panel mode. Demo。
    • 🌟 Added WeekPicker component. Demo
    • 🌟 Added new dateRender prop to allow customizing date cell.
  • TimePicker
    • 🌟 Added new hourStep, minuteStep, secondStep props to allow customizing time setps. Demo
    • 🌟 Added new focusOnOpen prop to focus input after panel is open.
  • Table
    • 🌟 Added new components prop to allow overriding default table elements. 
      // You can override following elements
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}}  />
    • 🌟 Added new onRow prop to allow passing custom props to table body row.
    • 🌟 Added new onHeaderRow props to allow passing custom props to table header row.
    • 🌟 Added column[onCell] to allow passing custom props to table body cell.
    • 🌟 Added column[onHeaderCell] to allow passing custom props to table header cell.
    • 🌟 Added column[align] to allow setting how text aligns.
    • 🌟 Added column[defaultSortOrder] to allow setting default sort order. #8111 @megawac
    • 🌟 Added rowSelection[fixed] to allow fixing the selection column.。
    • 🙅 Deprecated getBodyWrapper, please use components instead.
    • 🙅 Deprecated onRowClick，onRowDoubleClick、onRowContextMenu、onRowMouseEnter、onRowMouseLeave, please use onRow instead. 
      <Table onRow={(record) => ({
  onClick: () => {},
  onDoubleClick: () => {},
  onContextMenu: () => {},
  onMouseEnter: () => {},
  onMouseLeave: () => {},
})} />
  • Select
    • 🌟 Option's value can be a number in single or multiple mode.
    • 🌟 Added new maxTagCount and maxTagPlaceholder props.
    • 🌟 Added new showAction prop to allow setting the trigger action for popup.
    • 🌟 Added new onMouseEnter and onMouseLeave callback.
  • LocaleProvider

Bug fixes

  • Form
    • 🐞 Fixed issue result in Input icon is hovered by feedback icon.
    • 🐞 Fixed feedback icon not centered in large input.
  • 🐞 Fix Menu key press error. #8089

Other things

  • Don't need set allowSyntheticDefaultImports when using in TypeScript.
  • We removed react@0.14 and react@15 from peerDependencies, though antd@3.0 still works on old React versions, but we highly recommend you upgrading to React 16 since we may use the new features only exists in React 16 in the future. See React 16
  • Fully es module support, if you are using webpack 3, you can set babel-import-plugin's libraryDirectory to es to enable tree shaking .
  • We will support 2.x branch until July in next year.

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

主要变化

  • 全新的色彩系统, 组件主色由 『#108EE9』 改为 『#1890FF』，新主色我们称之为“拂晓蓝”。
  • 全新的视觉样式和组件尺寸，更现代更美观。
  • 基础字体大小由 12px 增大到 14px。
  • 默认语言由中文改为英文。
  • 全面支持 React 16。
  • 更友好的 TypeScript 支持。
  • 新的 List 组件。
  • 新的 Divider 组件。
  • 新增 30 个图标。

不兼容改动

此版本有部分不兼容的改动，升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效，所以我们提供了 antd-migration-helper 用于扫描代码中的废弃用法。

  • 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"。

    <html>
  <head>
+   <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
    <script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
  </head>
</html>

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

  • 🗑 移除了 DatePicker.Calendar， 请直接使用 Calendar 组件。
  • 🗑 移除了 DatePicker 的 toggleOpen 属性， 请使用 onOpenChange 代替。
  • 🗑 移除了 Form 的 inline、horizontal、vertical 属性，请使用 layout 代替。
  • 🗑 移除了 Select 的 multiple、tags、combobox 属性，请使用 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 类型。例子。
    • 🌟 新增 cover、actions 以及 Meta 子组件。例子。
  • DatePicker
    • 🌟 新增 mode 和 onPanelChange，用户控制面板的展示模式。例子。
    • 🌟 新增 WeekPicker 子组件。例子
    • 🌟 新增 dateRender 属性，用于自定义日期单元格的渲染。
  • TimePicker
    • 🌟 新增 hourStep、minuteStep、secondStep，用于设置时间步长。例子
    • 🌟 新增 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 属性代替。
    • 🙅 废弃以下属性 onRowClick，onRowDoubleClick、onRowContextMenu、onRowMouseEnter、onRowMouseLeave，请使用 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 月份。