資訊專欄INFORMATION COLUMN
摘要：是有贊端規(guī)范的實(shí)現(xiàn)版本，提供了一整套基礎(chǔ)的組件以及常用的業(yè)務(wù)組件。目前我們有組件，其中包括以及等實(shí)用的業(yè)務(wù)組件。一套有贊設(shè)計(jì)師繪制的圖標(biāo)庫(kù)。為了解決這些問(wèn)題，提供了一套自己的時(shí)間選擇組件，包括日期選擇周選擇組件月選擇以及時(shí)間區(qū)間選擇。
Zent ( ?zent ) 是有贊 PC 端 Web UI 規(guī)范的 React 實(shí)現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的__業(yè)務(wù)組件__。通過(guò) Zent，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。目前我們有 45+ 組件，其中包括 Design 以及 SKU 等實(shí)用的業(yè)務(wù)組件。這些組件都已經(jīng)在有贊的各類 PC 業(yè)務(wù)中廣泛使用，我們會(huì)在此基礎(chǔ)上，持續(xù)開(kāi)發(fā)更多實(shí)用的新組件。
我們的目標(biāo)是做東半球最好的 React 組件庫(kù)，讓 React 開(kāi)發(fā)更快、更簡(jiǎn)單。
一、特性一套完整的 UI 組件庫(kù)，組件都經(jīng)過(guò)有贊的業(yè)務(wù)檢驗(yàn)，實(shí)用又靠譜。
完善的中英文文檔，每個(gè)組件都有詳細(xì)的 API 說(shuō)明以及可以運(yùn)行的示例。
內(nèi)置了 TypeScript 類型定義文件。
Zent 支持自定義主題，通過(guò)我們提供的工具你可以在不修改代碼的情況下將組件庫(kù)的整體色調(diào)改成你想要的任何顏色。
一套有贊設(shè)計(jì)師繪制的圖標(biāo)庫(kù)。
單測(cè)覆蓋率在 90% 以上。
提供了一個(gè) babel 插件自動(dòng)化按需加載代碼，只引入使用到的 JavaScript 以及 CSS 文件，減小 bundle 體積。
二、我們的優(yōu)勢(shì): 豐富實(shí)用的組件下面是一些組件的簡(jiǎn)單展示，另外我們也提供了一些項(xiàng)目示例，可以幫助你快速使用 Zent 搭建一個(gè)頁(yè)面。
時(shí)間選擇做過(guò) Web 開(kāi)發(fā)的都知道瀏覽器原生的時(shí)間選擇組件不僅不好用，還有各種兼容性問(wèn)題。為了解決這些問(wèn)題，Zent 提供了一套自己的時(shí)間選擇組件，包括日期選擇、周選擇組件、月選擇以及時(shí)間區(qū)間選擇。為了適應(yīng)不同場(chǎng)景的需求，時(shí)間區(qū)間選擇還提供了兩種不同的交互模式。
顏色選擇器和時(shí)間選擇一樣，顏色選擇在 Web 上也是一個(gè)問(wèn)題，Zent 同樣提供了一個(gè)功能強(qiáng)大又方便的顏色選擇組件。
除了常用的基礎(chǔ)組件，Zent 還提供了豐富的__業(yè)務(wù)組件__，開(kāi)發(fā)者可以使用這些組件快速實(shí)現(xiàn)業(yè)務(wù)功能。
微頁(yè)面編輯我們還開(kāi)源了有贊的微頁(yè)面編輯組件，支持自定義微頁(yè)面內(nèi)的組件，讓你輕輕松松寫出一個(gè)WebApp，讓普通用戶也可以搭建含動(dòng)態(tài)數(shù)據(jù)的頁(yè)面的。
SKU 選擇商品規(guī)格是商品很重要的一個(gè)屬性，Zent 的 SKU 選擇組件封裝了商品規(guī)格選擇的邏輯，讓你從復(fù)雜的交互中解放出來(lái)，有更多精力去優(yōu)化業(yè)務(wù)的實(shí)現(xiàn)。
省市區(qū)選擇Zent 也提供了地址輸入中常用的省市區(qū)選擇組件，這個(gè)功能是由級(jí)聯(lián)選擇組件實(shí)現(xiàn)的。級(jí)聯(lián)選擇組件不僅僅可以用來(lái)實(shí)現(xiàn)省市區(qū)選擇，很多有層次關(guān)系的內(nèi)容選擇都可以通過(guò)這個(gè)交互實(shí)現(xiàn)，例如店鋪的主營(yíng)業(yè)務(wù)類目選擇等。
我們會(huì)繼續(xù)開(kāi)放更多基于 Zent 的實(shí)用業(yè)務(wù)組件，敬請(qǐng)期待。
三、展望Zent 還有不少功能沒(méi)有完善，例如還沒(méi)有動(dòng)畫基礎(chǔ)設(shè)施，很期待得到大家的批評(píng)和幫助，一起打造一個(gè)更完善、更好用的 Zent。
完整代碼請(qǐng)移步 Github，使用指南請(qǐng)移步文檔網(wǎng)站。
本文首發(fā)于有贊技術(shù)博客。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89705.html
摘要：背景由于有贊與微信密切的合作關(guān)系，我們第一時(shí)間就拿到了內(nèi)測(cè)賬號(hào)。春節(jié)前我們把它開(kāi)源到了上，是希望幫助開(kāi)發(fā)者尤其是有贊生態(tài)的開(kāi)發(fā)者能夠更快更低門檻地開(kāi)發(fā)出自己的微信小程序，同時(shí)希望和開(kāi)發(fā)者們一起打造高顏值好用易擴(kuò)展的小程序組件庫(kù)。 背景 由于有贊與微信密切的合作關(guān)系，我們第一時(shí)間就拿到了內(nèi)測(cè)賬號(hào)。17年1月9號(hào)，我們同時(shí)上線了有贊微商城小程序和有贊精選小程序（可以在微信-發(fā)現(xiàn)-小程序里搜...
摘要：但是，最后一步，事件怎么綁定呢這塊沒(méi)有深入研究了，不過(guò)我想，應(yīng)該這樣去實(shí)現(xiàn)也是沒(méi)有問(wèn)題的。的具體做法是，把方法放到了一個(gè)叫做的組件上去實(shí)現(xiàn)這個(gè)功能，然后再把內(nèi)容放進(jìn)這個(gè)組件。其他的邏輯比如顯示隱藏之類，全部都放到組件自身上去實(shí)現(xiàn)。 1、Dialog組件提供什么功能，解決什么問(wèn)題？ zent的Dialog組件，使用姿勢(shì)是這樣的（代碼摘自zent官方文檔：https://www.youza...
摘要：引言組件中有很多彈出式組件，常見(jiàn)的如，以及等。這樣一種層次結(jié)構(gòu)在實(shí)踐中大大降低了各類彈層組件的實(shí)現(xiàn)和維護(hù)成本。但是的組件實(shí)現(xiàn)了一個(gè)大多數(shù)組件庫(kù)都沒(méi)有實(shí)現(xiàn)的功能彈層的嵌套處理。 引言 UI 組件中有很多彈出式組件，常見(jiàn)的如 Dialog，Tooltip 以及 Select 等。這些組件都有一個(gè)特點(diǎn)，它們的彈出層通常不是渲染在當(dāng)前的 DOM 樹(shù)中，而是直接插入在 body （或者其它類似的...
摘要：一背景業(yè)務(wù)組件化或者叫模塊化作為移動(dòng)端應(yīng)用架構(gòu)的主流方式之一，近年來(lái)一直是業(yè)界積極探索和實(shí)踐的方向。有贊移動(dòng)團(tuán)隊(duì)自年起也在不斷嘗試各種組件化方案，在有贊微商城，有贊零售，有贊美業(yè)等多個(gè)應(yīng)用中進(jìn)行了實(shí)踐。相比組件，個(gè)人感覺(jué)稱之為模塊更為合適。 一、背景 業(yè)務(wù)組件化（或者叫模塊化）作為移動(dòng)端應(yīng)用架構(gòu)的主流方式之一，近年來(lái)一直是業(yè)界積極探索和實(shí)踐的方向。有贊移動(dòng)團(tuán)隊(duì)自16年起也在不斷嘗試各種...
摘要：原文來(lái)自集前端最近很火的框架資源定時(shí)更新，歡迎一下。推送自己整理近期三波關(guān)于的資訊這里就拋磚引玉了，望有更屌的資源送助攻。 原文來(lái)自：集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎Star一下。 推送自己整理近期三波關(guān)于Vue.js的資訊； 這里就拋磚引玉了，望有更屌的資源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...
閱讀 2573·2023-04-25 18:13
閱讀 797·2021-11-22 12:10
閱讀 2989·2021-11-22 11:57
閱讀 2150·2021-11-19 11:26
閱讀 2185·2021-09-22 15:40
閱讀 1475·2021-09-03 10:28
閱讀 2713·2019-08-30 15:53
閱讀 1960·2019-08-30 15:44
