Ant Design 家族再添新成员,全家族一览!
创始人
2025-07-10 04:31:03
0

近日,基于 Ant Design 的 Web3 开源组件库 Ant Design Web3 正式发布,Ant Design 家族又添一员。Ant Design 是蚂蚁金服推出的一个服务于企业级产品的设计体系,这个体系不断迭代,衍生出很多相关产品,给前端开发带来很大的便利。本文就来盘点一下 Ant Design 家族的产品,你用过几个?

图片图片

Ant Design

Ant Design 组件库是一套基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品,其提供了大量常用UI组件,包括表格、按钮、表单、提示框、树形控件等等。这个组件库主要用于研发企业级中后台产品,提炼自企业级中后台产品的交互语言和视觉风格,开箱即用的高质量React组件。使用TypeScript开发,提供完整的类型定义文件。

图片图片

Ant Design 是使用 React 实现的,社区还提供了一些其他技术的实现:

  • NG-ZORRO - Ant Design of Angular[1]
  • NG-ZORRO-MOBILE - Ant Design Mobile of Angular[2]
  • Ant Design of Vue[3]

官网:https://ant.design/

Ant Design Pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案,使用 React 和 Ant Design 作为基础框架,提供多功能的布局和设计组件,支持自动建立前端应用程序,并提供完整的开发和构建工具。它专门用于构建企业级管理后台和前端应用,提供一整套前端中后台项目的解决方案,包括路由、权限管理、国际化、数据mock、工程化等,帮助开发者快速搭建功能丰富的管理系统。

图片图片

官网:https://pro.ant.design/

Ant Design Web3

Ant Design Web3 是一个基于 Ant Design 的 Web3 React 组件库,它提供了一系列的组件,可以帮助你快速构建去中心化应用(DApp)。除了提供基本的组件之外,还提供了和链交互的能力,多层架构的设计可以兼容不同的链,也让组件拥有了超越 UI 的能力。

图片图片

Ant Design Web3 的特点如下:

  • Ant Design 友好:Ant Design Web3 的设计体系与 Ant Design 无缝衔接,开发者使用更容易。
  • 开箱即用的体验:可以快速设置项目,并利用预构建的组件来创建 DApps。
  • 与不同链的兼容性:Ant Design Web3 设计具有良好的扩展性,允许通过适配器适应不同的链。

Ant Design Web3 定义了一套通用的 API,基于这套 API 可以通过适配层对接不同的区块链。目前,支持了以太坊(包括兼容 EVM 的链),未来会尝试支持更多的链。

图片图片

官网:https://web3.ant.design/

Ant Design Pro Components

Ant Design Pro Components 是基于Ant Design而开发的模板组件,提供更高级别的抽象支持,开箱即用,可以显著提升制作CRUD页面的效率,更加专注于页面。ProComponents 是在Ant Design的基础上进行封装的页面级组件库,一个组件就可以搞定一个页面。这个组件库是 Ant Design Pro 中后台框架所用的主要组件库,内置了一系列的设计规范,预设了常用的逻辑,同时提供了灵活的支持。

图片图片

官网:https://procomponents.ant.design/

Ant Design Mobile

Ant Design Mobile 是 Ant Design 的移动规范的React实现,提供40+高质量基础组件,用于研发移动端产品,能够轻松适应各类产品风格。同时,UI样式高度可配置,拓展性更强。这个组件库全面兼容react/preact,可以全面覆盖各类场景。它基于React Native的iOS/Android/Web多平台支持,提供丰富的组件和特性,满足各种功能需求。

图片图片

官网:https://ant-design-mobile.antgroup.com/

Ant Design Mini

Ant Design Mini 是一套基于 Ant Design 的小程序 UI 组件库,目前支持在支付宝小程序、微信小程序(Beta)、uniapp 中使用,其特性如下:

  • 高性能:无需配置,即可拥有最佳的包体积大小和极致的性能
  • 可定制:可以高效地对组件外观进行调整或创造自己的主题
  • 原子化:每个组件的功能不多也不少,恰好就是你所需
  • 流畅感:拥有流畅的手势和细腻的动画,助力产品打造出极致体验

图片图片

官网:https://ant-design-mini.antgroup.com/

Ant Design Charts(Antv)

Ant Design Charts 一套数据可视化组件库,作为Ant Design的官方图表组件解决方案。这个组件库支持多种视觉效果,可以快速生成漂亮的图表和图形,并且提供了一些基本图表类型(如柱状图、折线图、饼图等),并支持自定义配置选项,比如图表的数据源、样式、标签等。此外,Ant Design Charts 是 AntV 的 React 版本,对 React 技术栈的同学更加友好。

图片图片

AntV 是蚂蚁集团提供的一套全新的视图可视化图表库,以图形出发,覆盖了传统统计图表、关系数据可视化、地理空间数据可视化、移动端图表、2D绘图引擎和智能可视化等多个领域,主要包含 G2、G6、X6、L7、F2、AVA 等十数个项目以及一套完整的图表使用和设计规范。

图片图片

官网:https://ant-design-charts.antgroup.com/

Ant Design Landing

Ant Design Landing 是针对产品首页的解决方案。它秉承 Ant Design 的设计价值观,延用 Ant Design 的设计原则,可以快速搭建出用户需要的首页,进一步提升工作效率。这个产品可以说是前端开发者“偷懒”的神器,不用写代码,就能开发出一个个精美的网站首页。平台拥有丰富的各类首页模板,下载模板代码包,即可快速使用。

图片图片

图片图片

官网:https://landing.ant.design/

Ant Motion

Ant Motion 是从 Ant Design 中提炼出来的动效语言,是一套React框架动效解决方案。它不仅仅是一种动效语言,还可以帮助开发者更容易地在项目中使用动效。通过使用 Ant Motion,开发者可以通过简单的配置实现所需的动画效果,包括单项动画、组合动画等,快速地提高工作效率。

图片图片

官网:https://motion.ant.design/

Scaffolds

Scaffolds 是一个丰富实用的脚手架集合。

图片图片

官网:https://scaffold.ant.design/

[1]Ant Design of Angular: http://ng.ant.design/

[2]Ant Design Mobile of Angular: http://ng.mobile.ant.design/

[3]Ant Design of Vue: http://antdv.com/

相关内容

热门资讯

PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则,即不考虑来源地提供所有内容和应用的...
各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方,这里我们主要介绍各种千兆交换机的数据接口类型,作为局域网的主要连接设...
什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中,我们已经阐述了一个重要观点,即:安全要素信息呈现出大数据的特征...
如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
P2P的自白|我不生产内容,我... 现在一提起P2P,人们就会联想到正在被有关部门“围剿”的互联网理财服务。×租宝事件使得劳...
Intel将Moblin社区控... 本周二,非营利机构Linux基金会宣布,他们将担负起Moblin社区的管理工作,而这之前,Mobli...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...