【译】Ant Design 3.0 驾到

Ant Design 3.0 驾到

Ant Design 是一个致力于提升「用户」和「设计者」使用体验,提高「研发者」开发效率的企业中后台设计体系。

14 个月前我们发布了 Ant Design 2.0。期间我们收到了 200 多位贡献者的 PR,经历了大约 4000 个提交和超过 60 个版本

GitHub 上的 star 数也从 6k 上升到了 20k。

自 2015 年以来的 GitHub star 趋势。

今天,我们很高兴地宣布,Ant Design 3.0 正式发布了。在这个版本中,我们为组件和网站做了全新的设计,引入了新的颜色系统,重构了多个底层组件,加入了新的特性和优化,同时最小化不兼容的更改。这里可查看到完整的更改日志。

这是我们的主页:ant.design/index-cn

全新的颜色系统

我们的新颜色系统源于天空的启发,因为她的包容性与我们品牌基调一致。基于对天空色彩随时间自然变化的观察,对光和阴影规则的研究,我们重新编写了颜色算法来生成一个全新的调色板,相应的层次也进行了优化。新调色板的感官更年轻,更明亮,灰度过渡得更自然,是感性美和理性美的完美结合。此外,所有主流色值都参照了信息获取标准。

组件的新设计

在之前的版本中,组件的基本字体大小是 12px,我们收到了很多来自社区的反馈,建议我们加大字号。我们的设计师也意识到,在大屏幕普及的今天,14px 是更合适的字体大小。因此,我们将基本字体大小增大到了 14px,并对所有组件的尺寸进行了适配。

组件重写

我们重写了 Table 组件来解决一些历史性问题。引入了一个新的工具 components,现在你可以使用这个工具来高度定制 Table 组件,这里有一个示例,可以添加拖拽功能。

Form 组件也被重新编写,为表单嵌套提供更好的支持。

另一个重写的组件是 Steps,这个重写的 Steps 有着更简单的 DOM 结构并且兼容到IE9。

全新的组件

这个版本,我们新增了两个组件, ListDivider

List 组件对于文本、列表、图片、段落和其他数据的显示非常方便。与第三方库集成也很简单,例如,您可以使用 react-virtualized 来实现无限加载列表。更详细的例子可以参考 List 文档。

Divider 组件可用于在不同的章节中分割文本段落,或者将行内文本/链接分开,如表的动态列。详细的示例可以参考 Divider 文档。

全面支持 React 16 和 ES 模块

在这个版本中,我们增加了对 React 16 和 ES 模块的支持。如果你正在使用 webpack 3,那么你现在可以通过 tree-shakingModuleConcatenationPlugin 来享受 antd 对组件的优化。如果你使用的是 babel-import-plugin,只需将 libraryDirectory 设置到 es 目录。

更友好的 TypeScript 支持

在我们的代码中,我们已经删除了所有的隐式 any 类型,在您的项目中不再需要配置 "allowSyntheticDefaultImports": true。如果您计划使用 TypeScript 来编写项目,请参考我们的新文档 「在 TypeScript 中使用」。

😍 还有一件事儿

有些人可能已经知道了,我们正在开发另一个名为 Ant Design Pro 的项目,它是一个企业级中后台前端/设计解决方案,是基于 Ant Design 3.0 的 React Boilerplate。尽管它还没有达到 1.0 版本。但是随着 antd 3.0 的发布,现在可以投入使用了。

接下来

我们的设计师正在重新编写我们的设计指南,并设计一个新的 Ant Design 官网。我们非常高兴能够提供更好的设计语言,以激发更多构建企业级应用的灵感。

为了使 1.0 早日成型,我们的工程师正在投入到 Ant Design Pro 努力工作,同时我们也需要你的帮助来翻译我们的文档

最后

如果没有你们的支持、反馈和参与,就不可能有今天的成功。感谢优秀的 Ant Design 社区。如果您在使用 antd 时遇到任何问题,可随时在 GitHub 提交问题

感谢你的阅读。敬请安装、star、尝试。 🎉

链接


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论
说说你的看法