Ant Design 4.0.0-rc.0 发布了。Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React
实现,使用 TypeScript 构建,提供完整的类型定义文件,自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React
组件与全链路开发和设计工具体系。
此版本更新内容:
新增功能及改进
antd 打包尺寸优化,js gzipped 从 532.75KB 下降到 289.89 KB。
新增黑暗主题支持。
ConfigProvider 支持 direction 国际化设置 rtl。
全新 Form 组件。
Form 组件自带数据绑定功能。
字段值改动只会影响相关组件的渲染而非整个 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 组件。
添加 summary 支持总结行。
现在 fixedColumn、expandable、scroll 可以混合使用。
支持多列排序。
支持自定义 body 并添加虚拟滚动例子。
使用 css sticky 实现固定效果以优化性能。
优化 expand 动画效果。
全新 DatePicker、 TimePicker 与 Calendar 组件。
支持自定义日期库。
添加 picker 支持设置选择器(不再需要通过受控 mode 模拟选择器)。
全范围选择器支持:时间、日期、周、月、年。
范围选择器现在可以单独选择开始与结束时间。
范围选择器可以为开始与结束时间单独设置 disabled。
范围选择器可以允许开始与结束时间为空。
优化键盘支持。
移除 Icon,使用 @ant-design/icons 代替。
Skeleton
支持 Skeleton.Avatar 占位组件。
支持 Skeleton.Button 占位组件。
支持 Skeleton.Input 占位组件。
Tree 支持虚拟滚动。
Tree 增强无障碍支持以及键盘交互。
Select 使用虚拟滚动并增强无障碍支持以及键盘交互。
TreeSelect 使用虚拟滚动并优化键盘支持。
Button 添加 danger 的 default 和 link 样式。
Form 与 ConfigProvider 支持 size 设置包含组件尺寸。
Typography 增加 suffix 属性。
Progress 增加 steps 子组件。
TextArea 支持 onResize。
新增 Alert.ErrorBoundary 用于提供友好的出错拦截和提示。
Upload 支持 iconRender 以自定义 icon。
Tag 组件预设状态颜色。
Grid 使用 flex 布局。
修复 Carousel 组件 dotposition 为 left | right 的显示错误。
修复 Alert 组件文本溢出的问题。
移除废弃 API 的警告信息。
为使用 v3 字符串作为 icon 的 Avatar, Button, Modal.method 和 Result 组件增加 warning。
添加 @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 变量。
此外,从 v3 迁移到 v4 可以参考迁移文档,详情查看更新说明:https://github.com/ant-design/ant-design/releases/tag/4.0.0-rc.0
【关键词:青岛UI培训,专业UI设计培训,学UI设计多少钱,UI培训哪家好,中享思途】