Ant Design 4.0.0-rc.0 發(fā)布,打包尺寸降低50%并增加黑色主題(ant design upload)

前言

Ant Design 4.0.0-rc.0 發(fā)布了。Ant Design 是阿里開(kāi)源的一套企業(yè)級(jí)的 UI 設(shè)計(jì)語(yǔ)言和 react 實(shí)現(xiàn),使用 TypeScript 構(gòu)建,提供完整的類(lèi)型定義文件,自帶提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格、開(kāi)箱即用的高質(zhì)量 React 組件與全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系。

Ant Design 4.0.0-rc.0 發(fā)布,打包尺寸降低50%并增加黑色主題(ant design upload)

特性

  • 企業(yè)級(jí)金融產(chǎn)品的交互語(yǔ)言和視覺(jué)體系。
  • 豐富實(shí)用的 React UI 組件。
  • 基于 React 的組件化開(kāi)發(fā)模式。
  • 背靠 npm 生態(tài)圈。
  • 基于 webpack 的調(diào)試構(gòu)建方案,支持 ES6。
  • Ant Design 4.0.0-rc.0 發(fā)布,打包尺寸降低50%并增加黑色主題(ant design upload)

    4.0.0-rc.0 新增功能

  • antd 打包尺寸優(yōu)化,js gzipped 從 532.75KB 下降到 289.89 KB。#20356
  • 新增黑暗主題支持。#20281
  • ConfigProvider 支持 direction 國(guó)際化設(shè)置 rtl。#19380
  • 全新 Form 組件。#17327
    • Form 組件自帶數(shù)據(jù)綁定功能。
    • 字段值改動(dòng)只會(huì)影響相關(guān)組件的渲染而非整個(gè) Form。
    • 新增 initialValues 以代替原 field 初始化字段。
    • 新增 validateMessages 以支持修改校驗(yàn)?zāi)0濉?/li>
    • 新增 onFinish 與 onFinishFailed 完成整體組件校驗(yàn)邏輯。
    • 新增 onFieldsChange 與 onValuesChange 以用于受控狀態(tài)觸發(fā)。
    • 提供 useForm 的 hook 支持。
    • Form.Item 新增 name 屬性以進(jìn)行數(shù)據(jù)綁定。
    • Form.Item validateTrigger 將只進(jìn)行校驗(yàn)觸發(fā)而不會(huì)同時(shí)收集字段值。
    • Form.Item 新增 rules 屬性以進(jìn)行數(shù)據(jù)校驗(yàn)。
    • Form.Item 新增 shouldUpdate 屬性以支持 render props。
    • Form.Item 新增 dependencies 屬性以簡(jiǎn)化相關(guān)字段更新邏輯。
    • Form.Item 新增 noStyle 屬性以及添加無(wú)樣式數(shù)據(jù)綁定。
    • 新增 Form.List 組件以簡(jiǎn)化增刪改查操作。
    • 新增 Form.Provider 組件以支持多表聯(lián)動(dòng)。
  • 全新 Table 組件。#19678
    • 添加 summary 支持總結(jié)行。
    • 現(xiàn)在 fixedColumn、expandable、scroll 可以混合使用。
    • 支持多列排序。
    • 支持自定義 body 并添加虛擬滾動(dòng)例子。
    • 使用 css sticky 實(shí)現(xiàn)固定效果以?xún)?yōu)化性能。
    • 優(yōu)化 expand 動(dòng)畫(huà)效果。
  • 全新 DatePicker、 TimePicker 與 Calendar 組件。#20023
    • 支持自定義日期庫(kù)。
    • 添加 picker 支持設(shè)置選擇器(不再需要通過(guò)受控 mode 模擬選擇器)。
    • 全范圍選擇器支持:時(shí)間、日期、周、月、年。
    • 范圍選擇器現(xiàn)在可以單獨(dú)選擇開(kāi)始與結(jié)束時(shí)間。
    • 范圍選擇器可以為開(kāi)始與結(jié)束時(shí)間單獨(dú)設(shè)置 disabled。
    • 范圍選擇器可以允許開(kāi)始與結(jié)束時(shí)間為空。
    • 優(yōu)化鍵盤(pán)支持。
  • 移除 Icon,使用 @ant-design/icons 代替。#18217
  • Skeleton
    • 支持 Skeleton.Avatar 占位組件。#19898 @Rustin-Liu
    • 支持 Skeleton.Button 占位組件。#19699 @Rustin-Liu
    • 支持 Skeleton.Input 占位組件。#20264 @Rustin-Liu
  • Tree 支持虛擬滾動(dòng)。#18172
  • Tree 增強(qiáng)無(wú)障礙支持以及鍵盤(pán)交互。#18866
  • Select 使用虛擬滾動(dòng)并增強(qiáng)無(wú)障礙支持以及鍵盤(pán)交互。#18658
  • TreeSelect 使用虛擬滾動(dòng)并優(yōu)化鍵盤(pán)支持。#19040
  • Button 添加 danger 的 default 和 link 樣式。#19837
  • Form 與 ConfigProvider 支持 size 設(shè)置包含組件尺寸。#20570
  • Typography 增加 suffix 屬性。#20224
  • Progress 增加 steps 子組件。#19613
  • TextArea 支持 onResize。#20408
  • 新增 Alert.ErrorBoundary 用于提供友好的出錯(cuò)攔截和提示。#19923
  • Upload 支持 iconRender 以自定義 icon。#20034 @qq645381995
  • Tag 組件預(yù)設(shè)狀態(tài)顏色。#19399
  • Grid 使用 flex 布局。#16635
  • 修復(fù) Carousel 組件 dotposition 為 left | right 的顯示錯(cuò)誤。#20645 @xrkffgg
  • 修復(fù) Alert 組件文本溢出的問(wèn)題。#20318
  • 移除廢棄 API 的警告信息。#17510
  • 為使用 v3 字符串作為 icon 的 Avatar, Button, Modal.method 和 Result 組件增加 warning。#20226
  • 添加 @border-color-split-popover、@input-icon-hover-color、@select-clear-background、@cascader-menu-border-color-split、@modal-header-border-color-split、@skeleton-to-color、@transfer-item-hover-bg 等 less 變量。#20070
  • 代碼示例

    var?antd?=?require('antd');

    var?Datepicker?=?antd.Datepicker;

    React.render(<Datepicker?/>,?mountNode);

    點(diǎn)評(píng)

    優(yōu)勢(shì):

    1、Ant Design是基于react開(kāi)發(fā)的一個(gè)解放ui和前端的工具,它提供了一致的設(shè)計(jì)方便我們快速開(kāi)發(fā)和減少不必要的設(shè)計(jì)與代碼,很多實(shí)用react框架的開(kāi)發(fā)者都已經(jīng)在使用ant.design了,且其在github上的star數(shù)也早已上萬(wàn),社區(qū)也非?;钴S。

    2、全中文文檔,在阿里久經(jīng)考驗(yàn),有大量實(shí)踐和參考頁(yè)面。

    3、提供Axure控件包,輸出多角色復(fù)雜的大型系統(tǒng)時(shí)候,需要模擬每個(gè)使用角色的所有頁(yè)面,這時(shí)效率非常高。能給前端開(kāi)發(fā)和測(cè)試人員節(jié)省大量時(shí)間。結(jié)合新的需求書(shū)寫(xiě)方式,測(cè)試人員只需看交互技能快速理解所有功能,開(kāi)發(fā)測(cè)試用例。

    4、適合中國(guó)大陸地區(qū)的排版樣式和習(xí)慣。

    不足:

    1、樣式模板比較單一(本次更新增加了黑色主題)。

    2、去年的圣誕節(jié)彩蛋,相信大家都沒(méi)有忘記。

    相關(guān)新聞

    聯(lián)系我們
    聯(lián)系我們
    公眾號(hào)
    公眾號(hào)
    在線咨詢(xún)
    分享本頁(yè)
    返回頂部