Ant Design 3.0.0 正式发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的 UI 设计语言和 React 实现。
主要变化
不兼容改动
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 的 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
-
Form
-
Message
-
Badge
-
Card
-
DatePicker
-
TimePicker
-
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 月份。
更多内容见 Ant Design 3.0 发布公告!