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

前言

Ant Design 4.0.0-rc.0 发布了。Ant Design 是阿里开源的一套企业级的 UI 设计语言和 react 实现,使用 TypeScript 构建,提供完整的类型定义文件,自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系。

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

特性

  • 企业级金融产品的交互语言和视觉体系。
  • 丰富实用的 React UI 组件。
  • 基于 React 的组件化开发模式。
  • 背靠 npm 生态圈。
  • 基于 webpack 的调试构建方案,支持 ES6。
  • Ant Design 4.0.0-rc.0 发布,打包尺寸降低50%并增加黑色主题(ant design upload)

    4.0.0-rc.0 新增功能

  • antd 打包尺寸优化,js gzipped 从 532.75KB 下降到 289.89 KB。#20356
  • 新增黑暗主题支持。#20281
  • ConfigProvider 支持 direction 国际化设置 rtl。#19380
  • 全新 Form 组件。#17327
    • 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 组件。#19678
    • 添加 summary 支持总结行。
    • 现在 fixedColumn、expandable、scroll 可以混合使用。
    • 支持多列排序。
    • 支持自定义 body 并添加虚拟滚动例子。
    • 使用 css sticky 实现固定效果以优化性能。
    • 优化 expand 动画效果。
  • 全新 DatePicker、 TimePicker 与 Calendar 组件。#20023
    • 支持自定义日期库。
    • 添加 picker 支持设置选择器(不再需要通过受控 mode 模拟选择器)。
    • 全范围选择器支持:时间、日期、周、月、年。
    • 范围选择器现在可以单独选择开始与结束时间。
    • 范围选择器可以为开始与结束时间单独设置 disabled。
    • 范围选择器可以允许开始与结束时间为空。
    • 优化键盘支持。
  • 移除 Icon,使用 @ant-design/icons 代替。#18217
  • Skeleton
    • 支持 Skeleton.Avatar 占位组件。#19898 @Rustin-Liu
    • 支持 Skeleton.Button 占位组件。#19699 @Rustin-Liu
    • 支持 Skeleton.Input 占位组件。#20264 @Rustin-Liu
  • Tree 支持虚拟滚动。#18172
  • Tree 增强无障碍支持以及键盘交互。#18866
  • Select 使用虚拟滚动并增强无障碍支持以及键盘交互。#18658
  • TreeSelect 使用虚拟滚动并优化键盘支持。#19040
  • Button 添加 danger 的 default 和 link 样式。#19837
  • Form 与 ConfigProvider 支持 size 设置包含组件尺寸。#20570
  • Typography 增加 suffix 属性。#20224
  • Progress 增加 steps 子组件。#19613
  • TextArea 支持 onResize。#20408
  • 新增 Alert.ErrorBoundary 用于提供友好的出错拦截和提示。#19923
  • Upload 支持 iconRender 以自定义 icon。#20034 @qq645381995
  • Tag 组件预设状态颜色。#19399
  • Grid 使用 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
  • 代码示例

    var antd = require('antd');

    var Datepicker = antd.Datepicker;

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

    点评

    优势:

    1、Ant Design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码,很多实用react框架的开发者都已经在使用ant.design了,且其在github上的star数也早已上万,社区也非常活跃。

    2、全中文文档,在阿里久经考验,有大量实践和参考页面。

    3、提供Axure控件包,输出多角色复杂的大型系统时候,需要模拟每个使用角色的所有页面,这时效率非常高。能给前端开发和测试人员节省大量时间。结合新的需求书写方式,测试人员只需看交互技能快速理解所有功能,开发测试用例。

    4、适合中国大陆地区的排版样式和习惯。

    不足:

    1、样式模板比较单一(本次更新增加了黑色主题)。

    2、去年的圣诞节彩蛋,相信大家都没有忘记。

    相关新闻

    联系我们
    联系我们
    公众号
    公众号
    在线咨询
    分享本页
    返回顶部