【資訊】1574- Ant Design 5.0 正式發(fā)布！
一、前言
Ant Design鏈接：
https://github.com/ant-design/ant-design
https://ant.design/components/overview-cn/
新增組件 新增組件變體 設(shè)計(jì)變化 新增導(dǎo)出對(duì)象 theme，用于獲取主題相關(guān)屬性 ConfigProvider 新增 theme 屬性，用于更改主題配置 產(chǎn)物新增 locale 目錄，內(nèi)含 cjs 格式的語言文件 移除了一些內(nèi)容
二、正文
全新 Design Token 模型
CSS-in-JS 動(dòng)態(tài)主題
官方棄用 less，采用 CSS-in-JS，更好地支持動(dòng)態(tài)主題。
v5 官方研發(fā)了一套針對(duì)組件級(jí)別的 CSS-in-JS 庫 @ant-design/cssinjs。它通過犧牲動(dòng)態(tài)性來獲取更高的緩存效率，從而減少運(yùn)行時(shí)的性能損耗。
https://www.npmjs.com/package/@ant-design/cssinjs
通過動(dòng)態(tài)主題能力，你通過 ConfigProvider 可以任意調(diào)整、嵌套主題：
<ConfigProvider theme={{ token: { colorPrimary: 'red' }}}>
<ConfigProvider theme={{ token: { colorPrimary: 'blue' }}}>
<MyApp />
</ConfigProvider>
</ConfigProvider>
甚至可以針對(duì)某一個(gè)組件進(jìn)行調(diào)整：
<ConfigProvider theme={{
components: {
Button: { colorText: 'red' },
},
}}>
<MyApp />
</ConfigProvider>新的 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 不在需要使用 babel-plugin-import 摘除未使用到的樣式。新的方案將自動(dòng)按需加載樣式。
更多組件
新增 Tour 組件用于引導(dǎo)用戶了解產(chǎn)品功能：
提供了一些組件的變體用于內(nèi)聯(lián)使用：
兼容性調(diào)整
Ant Design v5 兼容性調(diào)整從 IE 11 提升至 Edge，其余現(xiàn)代瀏覽器不變。IE 兼容性樣式代碼將全部移除。
默認(rèn) Day.js 代替 Moment.js
如果希望項(xiàng)目升級(jí)后仍然使用 Moment.js，可以通過 @ant-design/moment-webpack-plugin 插件進(jìn)行替換。
組件移除
評(píng)論
圖片
表情