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 的
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 }}的設置。Input.Search 新增
enterButton用於設置自定義的搜索圖標。#7596Mention 新增
placement, 用於設置下拉框的彈出方向。Carousel 新增
next()、prev()、goTo(slideNumber)方法，用於控制面板展示。Button 新增鏈接支持，當提供
href時會自動渲染爲<a>。#8343Steps 進行了重構，首次渲染的時候不會再閃爍。 #6010
Switch 新增
loading屬性，用於表現加載中的狀態。Menu
新增
subMenuOpenDelay和subMenuCloseDelay，用於設置子菜單打開和關閉的延遲。新增
forceSubMenuRender，用於強制渲染子菜單。#5586Form
新增顯示驗證信息時的動畫效果。
新增按條件渲染表單項的支持。#react-component/117
Message
duration允許可選 #7857 @monkindeyBadge
新增
offset屬性，用於設置狀態點的位置偏移。status允許與children同時使用。#8164Card
DatePicker
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]，用於設置列內文字的對其方向。
新增 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
新增冰島語。#7561 @paunovic-stefan
新增埃及語。#7888 @mohamed-seada-1994
Bug 修復
Form
修復輸入框的圖標會被驗證圖標覆蓋的問題。
修復使用大尺寸輸入框時，驗證圖標不居中的問題。
修復 Menu 按鍵時的報錯。#8089
其他
在 TypeScript 中使用時不再需要設置
allowSyntheticDefaultImports。從
peerDependencies中移除了[email protected]和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 發佈公告！