Zent有贊 React 基礎(chǔ)組件庫

Zent ( \?zent\ ) 是有贊 PC 端 Web UI 規(guī)范的 React 實(shí)現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的__業(yè)務(wù)組件__。通過 Zent，可以快速搭建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。目前我們有 45+ 組件，其中包括 Design以及 SKU 等實(shí)用的業(yè)務(wù)組件。這些組件都已經(jīng)在有贊的各類 PC 業(yè)務(wù)中廣泛使用，我們會(huì)在此基礎(chǔ)上，持續(xù)開發(fā)更多實(shí)用的新組件。

我們的目標(biāo)是做東半球最好的 React 組件庫，讓 React 開發(fā)更快、更簡單。

一、特性

• 一套完整的 UI 組件庫，組件都經(jīng)過有贊的業(yè)務(wù)檢驗(yàn)，實(shí)用又靠譜。

• 完善的中英文文檔，每個(gè)組件都有詳細(xì)的 API 說明以及可以運(yùn)行的示例。

• 內(nèi)置了 TypeScript 類型定義文件。

• Zent 支持自定義主題，通過我們提供的工具你可以在不修改代碼的情況下將組件庫的整體色調(diào)改成你想要的任何顏色。

• 一套有贊設(shè)計(jì)師繪制的圖標(biāo)庫。

• 單測覆蓋率在 90% 以上。

• 提供了一個(gè) babel 插件自動(dòng)化按需加載代碼，只引入使用到的 JavaScript 以及 CSS 文件，減小 bundle 體積。

二、我們的優(yōu)勢(shì): 豐富實(shí)用的組件

下面是一些組件的簡單展示，另外我們也提供了一些項(xiàng)目示例，可以幫助你快速使用 Zent 搭建一個(gè)頁面。

時(shí)間選擇

做過 Web 開發(fā)的都知道瀏覽器原生的時(shí)間選擇組件不僅不好用，還有各種兼容性問題。為了解決這些問題，Zent 提供了一套自己的時(shí)間選擇組件，包括日期選擇、周選擇組件、月選擇以及時(shí)間區(qū)間選擇。為了適應(yīng)不同場景的需求，時(shí)間區(qū)間選擇還提供了兩種不同的交互模式。

顏色選擇器

和時(shí)間選擇一樣，顏色選擇在 Web 上也是一個(gè)問題，Zent 同樣提供了一個(gè)功能強(qiáng)大又方便的顏色選擇組件。

除了常用的基礎(chǔ)組件，Zent 還提供了豐富的__業(yè)務(wù)組件__，開發(fā)者可以使用這些組件快速實(shí)現(xiàn)業(yè)務(wù)功能。

微頁面編輯

我們還開源了有贊的微頁面編輯組件，支持自定義微頁面內(nèi)的組件，讓你輕輕松松寫出一個(gè)WebApp，讓普通用戶也可以搭建含動(dòng)態(tài)數(shù)據(jù)的頁面的。

SKU 選擇

商品規(guī)格是商品很重要的一個(gè)屬性，Zent 的 SKU 選擇組件封裝了商品規(guī)格選擇的邏輯，讓你從復(fù)雜的交互中解放出來，有更多精力去優(yōu)化業(yè)務(wù)的實(shí)現(xiàn)。

省市區(qū)選擇

Zent 也提供了地址輸入中常用的省市區(qū)選擇組件，這個(gè)功能是由級(jí)聯(lián)選擇組件實(shí)現(xiàn)的。級(jí)聯(lián)選擇組件不僅僅可以用來實(shí)現(xiàn)省市區(qū)選擇，很多有層次關(guān)系的內(nèi)容選擇都可以通過這個(gè)交互實(shí)現(xiàn)，例如店鋪的主營業(yè)務(wù)類目選擇等。

我們會(huì)繼續(xù)開放更多基于 Zent 的實(shí)用業(yè)務(wù)組件，敬請(qǐng)期待。

三、展望

Zent 還有不少功能沒有完善，例如還沒有動(dòng)畫基礎(chǔ)設(shè)施，很期待得到大家的批評(píng)和幫助，一起打造一個(gè)更完善、更好用的 Zent。

完整代碼請(qǐng)移步 Github，使用指南請(qǐng)移步文檔網(wǎng)站。