打包尺寸降低50%并增加黑色主题(支持组件新增属性交互)

文章目录 [+]

特性企业级金融产品的交互语言和视觉体系。
丰富实用的 React UI 组件。
基于 React 的组件化开发模式。
背靠 npm 生态圈。
基于 webpack 的调试构建方案，支持 ES6。

4.0.0-rc.0 新增功能antd 打包尺寸优化，js gzipped 从 532.75KB 下降到 289.89 KB。
#20356新增黑暗主题支持。
#20281ConfigProvider 支持 direction 国际化设置 rtl。
#19380全新 Form 组件。
#17327Form 组件自带数据绑定功能。
字段值改动只会影响相关组件的渲染而非整个 Form。
新增 initialValues 以代替原 field 初始化字段。
新增 validateMessages 以支持修改校验模板。
新增 onFinish 与 onFinishFailed 完成整体组件校验逻辑。
新增 onFieldsChange 与 onValuesChange 以用于受控状态触发。
提供 useForm 的 hook 支持。
Form.Item 新增 name 属性以进行数据绑定。
Form.Item validateTrigger 将只进行校验触发而不会同时收集字段值。
Form.Item 新增 rules 属性以进行数据校验。
Form.Item 新增 shouldUpdate 属性以支持 render props。
Form.Item 新增 dependencies 属性以简化相关字段更新逻辑。
Form.Item 新增 noStyle 属性以及添加无样式数据绑定。
新增 Form.List 组件以简化增删改查操作。
新增 Form.Provider 组件以支持多表联动。
全新 Table 组件。
#19678添加 summary 支持总结行。
现在 fixedColumn、expandable、scroll 可以混合使用。
支持多列排序。
支持自定义 body 并添加虚拟滚动例子。
使用 css sticky 实现固定效果以优化性能。
优化 expand 动画效果。
全新 DatePicker、 TimePicker 与 Calendar 组件。
#20023支持自定义日期库。
添加 picker 支持设置选择器（不再需要通过受控 mode 模拟选择器）。
全范围选择器支持：时间、日期、周、月、年。
范围选择器现在可以单独选择开始与结束时间。
范围选择器可以为开始与结束时间单独设置 disabled。
范围选择器可以允许开始与结束时间为空。
优化键盘支持。
移除 Icon，使用 @ant-design/icons 代替。
#18217Skeleton支持 Skeleton.Avatar 占位组件。
#19898 @Rustin-Liu支持 Skeleton.Button 占位组件。
#19699 @Rustin-Liu支持 Skeleton.Input 占位组件。
#20264 @Rustin-LiuTree 支持虚拟滚动。
#18172Tree 增强无障碍支持以及键盘交互。
#18866Select 使用虚拟滚动并增强无障碍支持以及键盘交互。
#18658TreeSelect 使用虚拟滚动并优化键盘支持。
#19040Button 添加 danger 的 default 和 link 样式。
#19837Form 与 ConfigProvider 支持 size 设置包含组件尺寸。
#20570Typography 增加 suffix 属性。
#20224Progress 增加 steps 子组件。
#19613TextArea 支持 onResize。
#20408新增 Alert.ErrorBoundary 用于提供友好的出错拦截和提示。
#19923Upload 支持 iconRender 以自定义 icon。
#20034 @qq645381995Tag 组件预设状态颜色。
#19399Grid 使用 flex 布局。
#16635修复 Carousel 组件 dotposition 为 left | right 的显示错误。
#20645 @xrkffgg修复 Alert 组件文本溢出的问题。
#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代码示例