近日，基于 Ant Design 的 Web3 開源組件庫 Ant Design Web3 正式發(fā)布，Ant Design 家族又添一員。Ant Design 是螞蟻金服推出的一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系，這個體系不斷迭代，衍生出很多相關(guān)產(chǎn)品，給前端開發(fā)帶來很大的便利。本文就來盤點一下 Ant Design 家族的產(chǎn)品，你用過幾個？

圖片

Ant Design

Ant Design 組件庫是一套基于 Ant Design 設(shè)計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，其提供了大量常用UI組件，包括表格、按鈕、表單、提示框、樹形控件等等。這個組件庫主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格，開箱即用的高質(zhì)量React組件。使用TypeScript開發(fā)，提供完整的類型定義文件。

圖片

Ant Design 是使用 React 實現(xiàn)的，社區(qū)還提供了一些其他技術(shù)的實現(xiàn)：

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

官網(wǎng)：https://ant.design/

Ant Design Pro

Ant Design Pro 是一個企業(yè)級中后臺前端/設(shè)計解決方案，使用 React 和 Ant Design 作為基礎(chǔ)框架，提供多功能的布局和設(shè)計組件，支持自動建立前端應(yīng)用程序，并提供完整的開發(fā)和構(gòu)建工具。它專門用于構(gòu)建企業(yè)級管理后臺和前端應(yīng)用，提供一整套前端中后臺項目的解決方案，包括路由、權(quán)限管理、國際化、數(shù)據(jù)mock、工程化等，幫助開發(fā)者快速搭建功能豐富的管理系統(tǒng)。

圖片

官網(wǎng)：https://pro.ant.design/

Ant Design Web3

Ant Design Web3 是一個基于 Ant Design 的 Web3 React 組件庫，它提供了一系列的組件，可以幫助你快速構(gòu)建去中心化應(yīng)用（DApp）。除了提供基本的組件之外，還提供了和鏈交互的能力，多層架構(gòu)的設(shè)計可以兼容不同的鏈，也讓組件擁有了超越 UI 的能力。

圖片

Ant Design Web3 的特點如下：

• Ant Design 友好：Ant Design Web3 的設(shè)計體系與 Ant Design 無縫銜接，開發(fā)者使用更容易。
• 開箱即用的體驗：可以快速設(shè)置項目，并利用預(yù)構(gòu)建的組件來創(chuàng)建 DApps。
• 與不同鏈的兼容性：Ant Design Web3 設(shè)計具有良好的擴展性，允許通過適配器適應(yīng)不同的鏈。

Ant Design Web3 定義了一套通用的 API，基于這套 API 可以通過適配層對接不同的區(qū)塊鏈。目前，支持了以太坊（包括兼容 EVM 的鏈），未來會嘗試支持更多的鏈。

圖片

官網(wǎng)：https://web3.ant.design/

Ant Design Pro Components

Ant Design Pro Components 是基于Ant Design而開發(fā)的模板組件，提供更高級別的抽象支持，開箱即用，可以顯著提升制作CRUD頁面的效率，更加專注于頁面。ProComponents 是在Ant Design的基礎(chǔ)上進(jìn)行封裝的頁面級組件庫，一個組件就可以搞定一個頁面。這個組件庫是 Ant Design Pro 中后臺框架所用的主要組件庫，內(nèi)置了一系列的設(shè)計規(guī)范，預(yù)設(shè)了常用的邏輯，同時提供了靈活的支持。

圖片

官網(wǎng)：https://procomponents.ant.design/

Ant Design Mobile

Ant Design Mobile 是 Ant Design 的移動規(guī)范的React實現(xiàn)，提供40+高質(zhì)量基礎(chǔ)組件，用于研發(fā)移動端產(chǎn)品，能夠輕松適應(yīng)各類產(chǎn)品風(fēng)格。同時，UI樣式高度可配置，拓展性更強。這個組件庫全面兼容react/preact，可以全面覆蓋各類場景。它基于React Native的iOS/Android/Web多平臺支持，提供豐富的組件和特性，滿足各種功能需求。

圖片

官網(wǎng)：https://ant-design-mobile.antgroup.com/

Ant Design Mini

Ant Design Mini 是一套基于 Ant Design 的小程序 UI 組件庫，目前支持在支付寶小程序、微信小程序（Beta）、uniapp 中使用，其特性如下：

• 高性能：無需配置，即可擁有最佳的包體積大小和極致的性能
• 可定制：可以高效地對組件外觀進(jìn)行調(diào)整或創(chuàng)造自己的主題
• 原子化：每個組件的功能不多也不少，恰好就是你所需
• 流暢感：擁有流暢的手勢和細(xì)膩的動畫，助力產(chǎn)品打造出極致體驗

圖片

官網(wǎng)：https://ant-design-mini.antgroup.com/

Ant Design Charts（Antv）

Ant Design Charts 一套數(shù)據(jù)可視化組件庫，作為Ant Design的官方圖表組件解決方案。這個組件庫支持多種視覺效果，可以快速生成漂亮的圖表和圖形，并且提供了一些基本圖表類型（如柱狀圖、折線圖、餅圖等），并支持自定義配置選項，比如圖表的數(shù)據(jù)源、樣式、標(biāo)簽等。此外，Ant Design Charts 是 AntV 的 React 版本，對 React 技術(shù)棧的同學(xué)更加友好。

圖片

AntV 是螞蟻集團提供的一套全新的視圖可視化圖表庫，以圖形出發(fā)，覆蓋了傳統(tǒng)統(tǒng)計圖表、關(guān)系數(shù)據(jù)可視化、地理空間數(shù)據(jù)可視化、移動端圖表、2D繪圖引擎和智能可視化等多個領(lǐng)域，主要包含 G2、G6、X6、L7、F2、AVA 等十?dāng)?shù)個項目以及一套完整的圖表使用和設(shè)計規(guī)范。

圖片

官網(wǎng)：https://ant-design-charts.antgroup.com/

Ant Design Landing

Ant Design Landing 是針對產(chǎn)品首頁的解決方案。它秉承 Ant Design 的設(shè)計價值觀，延用 Ant Design 的設(shè)計原則，可以快速搭建出用戶需要的首頁，進(jìn)一步提升工作效率。這個產(chǎn)品可以說是前端開發(fā)者“偷懶”的神器，不用寫代碼，就能開發(fā)出一個個精美的網(wǎng)站首頁。平臺擁有豐富的各類首頁模板，下載模板代碼包，即可快速使用。

圖片

圖片

官網(wǎng)：https://landing.ant.design/

Ant Motion

Ant Motion 是從 Ant Design 中提煉出來的動效語言，是一套React框架動效解決方案。它不僅僅是一種動效語言，還可以幫助開發(fā)者更容易地在項目中使用動效。通過使用 Ant Motion，開發(fā)者可以通過簡單的配置實現(xiàn)所需的動畫效果，包括單項動畫、組合動畫等，快速地提高工作效率。

圖片

官網(wǎng)：https://motion.ant.design/

Scaffolds

Scaffolds 是一個豐富實用的腳手架集合。

圖片

官網(wǎng)：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/