当前位置: 首页 > 软件库 > Web应用开发 > 网页组件 >

Zent

有赞 React 基础组件库
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 网页组件
软件类型 开源软件
地区 国产
投 递 者 戈正初
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

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

一、特性

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

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

  • 内置了 TypeScript 类型定义文件。

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

zent-theme

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

  • 单测覆盖率在 90% 以上。

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

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

zent-components

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

时间选择

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

zent-datepicker

颜色选择器

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

zent-colorpicker

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

微页面编辑

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

zent-design

SKU 选择

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

zent-sku

省市区选择

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

zent-cascader

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

三、展望

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

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

  • zent封装表单组件 zent版本7.4.3 1. 利用zent的几个组件 FormControl: 包裹封装组件,用于为封装的表单组件提供label, invalid等参数,与其他封装的表单组件统一格式 FieldSet: 包裹封装的外部组件,当FormStrategy.View时,为上级托管的Form组件添加字段name Form.useField: 初始化一个model,包括初始值,键值ke

  •   在写这个系列之前,至秦有点担忧,担心自己的理解不够,不能全面地,比较清楚地介绍这个框架。因为这也是至秦接触的第一个php框架。   什么是zent framework?   首先,它是一个开源框架,并且,它是一个比较知名的开源框架,基于MVC架构,在http://bbs.phpchina.com/forum.php?mod=viewthread&tid=169535这边文章中,它是国外十大PH

  • 1、Dialog组件提供什么功能,解决什么问题? zent的Dialog组件,使用姿势是这样的(代码摘自zent官方文档:https://www.youzanyun.com/zan...) import { Dialog, Button } from 'zent'; class Example extends React.Component { state = { visible: fals

  • zentao 项目管理软件 docker 部署 docker 镜像选择 idoop/zentao (100K downloads 89stars 最后一次更新3个月前) easysoft/zentao (10k 23stars 最后一次更新3个月前)(禅道官网链接,没有dockerhub的官方认证) 禅道docker安装官方手册 https://www.zentao.net/book/zentao

 相关资料
  • X5的界面是由组件构成的,组件是一个可以以图形化方式显示在屏幕上,并能与用户进行交互的对象。组件是对数据和方法的封装,有自己的属性、事件和方法等。本文从组件的创建、属性、方法、操作、事件、样式、API、调试等方面介绍组件的使用。 目录 1、由组件构成的界面 2、组件的创建 2.1、设计时摆放组件 2.2、动态创建组件 3、组件的属性 3.1、使用设计器设置 3.2、使用表达式配置 3.3、使用js

  • X5的界面是由组件构成的,组件是一个可以以图形化方式显示在屏幕上,并能与用户进行交互的对象。组件是对数据和方法的封装,有自己的属性、事件和方法等。本文从组件的创建、属性、方法、操作、事件、样式、API、调试等方面介绍组件的使用。 目录 1、由组件构成的界面 2、组件的创建 2.1、设计时摆放组件 2.2、动态创建组件 3、组件的属性 3.1、使用设计器设置 3.2、使用表达式配置 3.3、使用js

  • 主要内容:GWT UI界面组成部分,GWT UI界面元素,GWT UI界面基础组件GWT UI界面组成部分 每个用户界面都考虑以下三个主要方面 - UI 元素: 这些是用户最终看到并与之交互的核心视觉元素。GWT 提供了大量广泛使用和常见的元素,从基本到复杂,我们将在本教程中介绍。 Layout布局: 它们定义了 UI 元素应该如何在屏幕上组织,并为 GUI(图形用户界面)提供最终的外观和感觉。这部分将在布局一章中介绍。 Behavior行为-:这些是用户与 UI 元素交互时发

  • 1. 前言 本节我们将介绍如何使用组件(Component),组件是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 如何规划和设计组件是学习组件的难点,在编写组件时,我们需要不断思考如何提高组件的可复用性。 2. 慕课解释 组件是可复用的 Vue 实例,且带有一

  • 点赞组件 <a href="{:U('article/do_like',array('id'=>$object_id))}" class="js-count-btn"><i class="fa fa-thumbs-up"></i><span class="count">{$post_like}</span></a> 分解组件: <!-- 点赞链接 须传入文章id --> href="{:U('a

  • Canvas 组件参考 UITransform 组件参考 Widget 组件参考 Button 组件参考 Layout 组件参考 EditBox 组件参考 ScrollView 组件参考 ScrollBar 组件参考 ProgressBar 组件参考 LabelOutline 组件参考 Toggle 组件参考 UIMeshRenderer 组件参考 ToggleGroup 组件参考 Slider