资讯专栏INFORMATION COLUMN

Zent - 源自有赞微商城的 React 组件库

Corwien / 2693人阅读

摘要:是有赞端规范的实现版本,提供了一整套基础的组件以及常用的业务组件。目前我们有组件,其中包括以及等实用的业务组件。一套有赞设计师绘制的图标库。为了解决这些问题,提供了一套自己的时间选择组件,包括日期选择周选择组件月选择以及时间区间选择。

Zent ( ˈzent ) 是有赞 PC 端 Web UI 规范的 React 实现版本,提供了一整套基础的 UI 组件以及常用的__业务组件__。通过 Zent,可以快速搭建出风格统一的页面,提升开发效率。目前我们有 45+ 组件,其中包括 Design 以及 SKU 等实用的业务组件。这些组件都已经在有赞的各类 PC 业务中广泛使用,我们会在此基础上,持续开发更多实用的新组件。

我们的目标是做东半球最好的 React 组件库,让 React 开发更快、更简单。

一、特性

一套完整的 UI 组件库,组件都经过有赞的业务检验,实用又靠谱。

完善的中英文文档,每个组件都有详细的 API 说明以及可以运行的示例。

内置了 TypeScript 类型定义文件。

Zent 支持自定义主题,通过我们提供的工具你可以在不修改代码的情况下将组件库的整体色调改成你想要的任何颜色。

一套有赞设计师绘制的图标库。

单测覆盖率在 90% 以上。

提供了一个 babel 插件自动化按需加载代码,只引入使用到的 JavaScript 以及 CSS 文件,减小 bundle 体积。

二、我们的优势: 丰富实用的组件

下面是一些组件的简单展示,另外我们也提供了一些项目示例,可以帮助你快速使用 Zent 搭建一个页面。

时间选择

做过 Web 开发的都知道浏览器原生的时间选择组件不仅不好用,还有各种兼容性问题。为了解决这些问题,Zent 提供了一套自己的时间选择组件,包括日期选择、周选择组件、月选择以及时间区间选择。为了适应不同场景的需求,时间区间选择还提供了两种不同的交互模式。

颜色选择器

和时间选择一样,颜色选择在 Web 上也是一个问题,Zent 同样提供了一个功能强大又方便的颜色选择组件。

除了常用的基础组件,Zent 还提供了丰富的__业务组件__,开发者可以使用这些组件快速实现业务功能。

微页面编辑

我们还开源了有赞的微页面编辑组件,支持自定义微页面内的组件,让你轻轻松松写出一个WebApp,让普通用户也可以搭建含动态数据的页面的。

SKU 选择

商品规格是商品很重要的一个属性,Zent 的 SKU 选择组件封装了商品规格选择的逻辑,让你从复杂的交互中解放出来,有更多精力去优化业务的实现。

省市区选择

Zent 也提供了地址输入中常用的省市区选择组件,这个功能是由级联选择组件实现的。级联选择组件不仅仅可以用来实现省市区选择,很多有层次关系的内容选择都可以通过这个交互实现,例如店铺的主营业务类目选择等。

我们会继续开放更多基于 Zent 的实用业务组件,敬请期待。

三、展望

Zent 还有不少功能没有完善,例如还没有动画基础设施,很期待得到大家的批评和帮助,一起打造一个更完善、更好用的 Zent。

完整代码请移步 Github,使用指南请移步文档网站。

本文首发于有赞技术博客。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89705.html

相关文章

  • 有赞微信小程序组件(ZanUI-WeApp)开

    摘要:背景由于有赞与微信密切的合作关系,我们第一时间就拿到了内测账号。春节前我们把它开源到了上,是希望帮助开发者尤其是有赞生态的开发者能够更快更低门槛地开发出自己的微信小程序,同时希望和开发者们一起打造高颜值好用易扩展的小程序组件库。 背景 由于有赞与微信密切的合作关系,我们第一时间就拿到了内测账号。17年1月9号,我们同时上线了有赞微商城小程序和有赞精选小程序(可以在微信-发现-小程序里搜...

    psychola 评论0 收藏0
  • zent之Dialog组件实现

    摘要:但是,最后一步,事件怎么绑定呢这块没有深入研究了,不过我想,应该这样去实现也是没有问题的。的具体做法是,把方法放到了一个叫做的组件上去实现这个功能,然后再把内容放进这个组件。其他的逻辑比如显示隐藏之类,全部都放到组件自身上去实现。 1、Dialog组件提供什么功能,解决什么问题? zent的Dialog组件,使用姿势是这样的(代码摘自zent官方文档:https://www.youza...

    陈江龙 评论0 收藏0
  • 漫谈 React 组件开发(一):多层嵌套弹层组件

    摘要:引言组件中有很多弹出式组件,常见的如,以及等。这样一种层次结构在实践中大大降低了各类弹层组件的实现和维护成本。但是的组件实现了一个大多数组件库都没有实现的功能弹层的嵌套处理。 引言 UI 组件中有很多弹出式组件,常见的如 Dialog,Tooltip 以及 Select 等。这些组件都有一个特点,它们的弹出层通常不是渲染在当前的 DOM 树中,而是直接插入在 body (或者其它类似的...

    warmcheng 评论0 收藏0
  • 有赞移动 iOS 组件化(模块化)架构设计实践

    摘要:一背景业务组件化或者叫模块化作为移动端应用架构的主流方式之一,近年来一直是业界积极探索和实践的方向。有赞移动团队自年起也在不断尝试各种组件化方案,在有赞微商城,有赞零售,有赞美业等多个应用中进行了实践。相比组件,个人感觉称之为模块更为合适。 一、背景 业务组件化(或者叫模块化)作为移动端应用架构的主流方式之一,近年来一直是业界积极探索和实践的方向。有赞移动团队自16年起也在不断尝试各种...

    Thanatos 评论0 收藏0
  • 推送近期三波关于Vue.js资讯

    摘要:原文来自集前端最近很火的框架资源定时更新,欢迎一下。推送自己整理近期三波关于的资讯这里就抛砖引玉了,望有更屌的资源送助攻。 原文来自:集web前端最近很火的vue2框架资源;定时更新,欢迎Star一下。 推送自己整理近期三波关于Vue.js的资讯; 这里就抛砖引玉了,望有更屌的资源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

    Anonymous1 评论0 收藏0

发表评论

0条评论

Corwien

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<