前言

Ant Design 4.1.0 發佈了。Ant Design 是阿里開源的一套企業級的 UI 設計語言和 React 實現，使用 TypeScript 構建，提供完整的類型定義文件，自帶提煉自企業級中後臺產品的交互語言和視覺風格、開箱即用的高質量 React 組件與全鏈路開發和設計工具體系。

更新內容

此版本更新內容：

1、支持緊湊模式主題。#22126 @AshoneA

2、新的 Space 組件以支持內聯組件的間距樣式。#22363

3、DatePicker 支持季度選擇器。#22468

4、Tree/TreeSelect/Select 支持 virtual 屬性以關閉虛擬滾動。#21955

5、改進 Pagination 使用體驗。#22711

<code>a、Pagination 當 total > 50 時默認顯示切換頁數選擇器。
b、統一 Pagination 十頁以內的頁碼個數使其寬度更統一。
c、Pagination 調整默認頁數選項為 10, 20, 50, 100。/<code>

6、Table

<code>a、Table 分頁位置增加更多選項。#22647 @hengkx
b、Table 選擇列支持 renderCell。#21711
c、Table 排序增加下次排序的提示，並增加 showSorterTooltip 屬性開關。#21631 @AshoneA/<code> 

7、Tag 支持 icon 屬性。#22418 @vtsybulin

8、Grid 添加 useBreakpoint hook. #22226

9、Card 支持 tabProps。#22207

10、Menu.Item 上的 Tooltip 現在可以使用 title={null} 來禁用。#22202

11、Pagination supports autoResize prop。#21959 @wendellhu95

12、Popover/Popconfirm 添加 render props 支持。#22034 @nossbigg

13、TimePicker.RangePicker 支持 order 屬性用於設置排序行為。#21948

14、Carousel dots 支持對象傳遞 className。#21848

15、Form validateMessages 支持 ${label} 變量。#21835

16、暴露 Breadcrumb.Item 組件的所有 Dropdown 的可配置屬性。#20763 @paranoidjk

17、增強 Tabs 可訪問性。#22287

<code>a、新增 Tabs keyboard 屬性用於開關鍵盤切換功能。
b、Tabs extraContent 裡的元素不再觸發鍵盤切換功能。/<code>

18、添加 Form.Item 在受控時使用 defaultValue 的警告信息。#22571

19、Typography onExpand 添加事件參數。#22092 @BlazPocrnja

20、簡化 Popconfirm 和 Popover 的 dom 結構。#22052

21、修復 Autocomplete value 為 null 時，值展示 null 的問題。#21955

22、調整 Drawer 無 title 時關閉按鈕樣式以避免遮擋滾動條。#22710

23、修復 Calendar 的一些樣式細節問題。#22676

24、Table

<code>a、修復 Table 在 Safari 下固定列的陰影樣式問題。#22680
b、修復 Table 樣式影響內嵌 table 的問題。#22643
c、修復 Table 同時設置 rowSelection 和 onRow 事件冒泡問題。#22566 @hengkx 

d、修復 Table 空文本沒有居中的問題與空數據依然展示了分頁的問題。#22548 @hengkx/<code>

25、修復 Input 只配置 suffix 時的樣式對齊問題。#22603

26、修復 Alert 無法和 Tooltip/Popover 一起使用的問題。#22594

27、修復嵌套動態 Form.Item 會被 react 警告更新移除節點的信息。#22575

28、調整 Tag processing 狀態顏色。#22303

29、移除 Select 下拉組標題的鼠標可點擊樣式。#22581

30、遷移 @form-item-label-height less 變量到主題變量中。#22600 @slavakam

31、優化 Table 篩選菜單按鈕的樣式並修復 Dropdown 二級菜單的上下邊距。#22072

32、新增 less 變量 @link-focus-decoration 和 @link-focus-outline。#22511

33、新增 DatePicker disabled 時，分隔符鼠標禁用樣式。#22563

34、RTL

<code>a、優化 CheckBox inner RTL 樣式問題。#22627
b、優化 Upload picture-card RTL 樣式問題。#22630
c、修復 Badge RTL 數字顯示樣式問題。#22665
d、修復 Select RTL 多選可清空時，選項樣式問題。#22596
e、修復 Progress RTL 樣式問題。#22558
f、修復 Badge RTL 樣式問題。#22551
g、修復 Input RTL 樣式問題。#22525
h、修復 Steps RTL 樣式問題。#22523
i、優化 Tabs RTL 按鈕樣式問題。#22653
j、優化 Input.Group RTL 樣式問題。#22624
k、優化 Timeline label RTL 樣式問題。#22652
l、優化 Select group RTL 樣式問題。#22584
m、優化 Dropdown.Button RTL 樣式問題。#22519/<code>

36、Typescript

<code>a、替換廢棄的 React.SFC 為 React.FC。#22691 @Rustin-Liu
b、修復 Form.Item children 的類型定義。#22662/<code>

閱讀更多 IT實戰聯盟 的文章

關鍵字: 前言 Safari TypeScript