比antd-mobile体验更佳的Zarm2.0组件库来了,2020从此你多了一个选择

React-ZarmUI:跨平台React & React-Native移动端UI组件库 核心组件是任何UI库的基础,它们涵盖了网页开发中常用的UI元素。React-ZarmUI中的核心组件提供了一系列预定义的样式和行为,从而使得开发者能够以最小的努力构建出高质量的用户界面。一个灵活的主题系统应该允许开发者定义和修改主题的各个部分,从颜色、字体到布局大小和间距等。理想的结构设计应该是扁平且可扩展的,便于主题内容的读取和动态更新。colors: {// 其他颜色},fonts: {// 其他字体样式},// 其他间距定义},// 其他主题配置项... 阅读详情

​  对不起,我们来晚了 —— ZArm组件库

​ 是的,大家可能很疑惑:“都2020年了,怎么现在还发布组件库呢?”…

​ 确实,对于前端组件库的大家庭来说,我们迟到了,但也请各位可以抽出几分钟看看一位初来乍到的新人的自我介绍:

Zarm是什么

​ ​ Zarm 是众安科技基于 React、React-Native 研发的一款适用于企业级的移动端UI组件库。(官网|github|演示地址 推荐在手机上浏览)

​ ​ Zarm 的取名,灵感来源于众安保险秉承的理念:做有温度的保险。Zarm = za + warm,za代表众安,warm有“温暖的”意思,以重合的a字母为中心,各取左右两部分。追求极致的用户体验,致力于做有温度的组件库也是zarm项目发起的初衷。

​ ​ Zarm的发展历程:起初,zarm的前身还只是一个个人项目,2018年后慢慢在众安健康险事业部推广使用。2019年初,众安宣布直营产品品牌化的战略方向 ,这意味着各大BU的产出页面都有可能投放到直营渠道;为了规范了众安系产品基础组件的视觉及交互,整体提升众安系产品的用户体验,保障产品体验的一致性,因此,在众安技术委员会的发起下,Zarm项目诞生了;经过各个BU团队优秀设计师们的努力下,数月后终于敲定了视觉和交互规范,Zarm的前端代码的实现采取自由认领的方式,全公司活跃的前端er们迅速推进,最终趋于稳定,用于生产环境;为了让业务同学和设计、前端的认知形成统一,Zarm形成Axure元件库、项目模板规范等 帮助业务同学快速完成高质量的产品原型;三者相辅相成,最终实现了降低整条工作链路上人力成本和沟通成本的目标。

​ ​ Zarm经历了两年多的业务沉淀,服务过十个事业部中近百项目,这使得我们相信除了在众安内部,zarm一定也有它的用武之地。

Zarm的优势

多

  • 组件多。Zarm目前开源了50个组件,基本覆盖常见的通用组件,并仍在持续更新迭代中。

ZArm组件图

  • 规范多:

    拥有完整统一的设计规范。

    样式命名采用了BEM的规范,内部实现使用了Css Variables + SCSS Mixins,这使得样式维护的工作变得优雅简洁。

    遵循严格的代码规范,基于airbnb的lint封装的eslint规则以及基于stylelint实现的样式规范。

快

  • 依赖少体积小,极少的依赖三方库,Gzip压缩后,全量组件只有60kb左右的大小。
  • 支持按需加载,zarm 默认支持基于 ES module 的 tree shaking。

好

  • 扩展性好,我们提供了内置的基础组件,可以方便地基于现有组件实现二次开发。

    比如我们的Popup组件就是所有弹层类组件的基础,Modal、Toast、Loading、ActionSheet、Picker、Select等都是基于 Popup 组件实现。再比如PickerView组件就是滑动选择类组件的基础,而Picker组件就是简单的将Popup和PickerView结合而成。相信你也可以基于这些基础组件开发出更丰富的业务组件~

  • Zarm也会密切关注官方的更新,在发布的正式版中,我们已去除在React17中不再常规使用的生命周期,更新为最新的生命周期。

  • 响应及时,目前在内部开源的情况下,已有接近3000次的commit,在及时响应issue的同时,我们也保持着快速的迭代。后续也会有官方讨论群,只要有问题,我们一定及时跟进,不会让问题石沉大海。

  • 稳定性好,Zarm使用Jest + Enzyme做单元测试。单元测试覆盖率超过80%,并且在持续攀升中。

爽

  • 友好的typescript支持,都2020年了,再不用ts的话世界末日真的就要来了。

  • 样式使用css变量,支持一键换肤,自定义皮肤。

    ZArm组件库概括图

Zarm的未来

在不久的未来,我们会推出:

  • 桌面端组件库 Zarm-Web。

  • hpaPaaS 无代码建站平台(名字暂时保密)。

    …

对不起,我们来晚了

​ ​ 在各个前端团队或自己研发、或使用第三方组件库的时代,我们推出Zarm组件库的时机可能有些晚。但是我们也是抱着后来者居上的决心,希望能在组件库领域开辟一块属于Zarm的疆土。

​ ​ 在如今这个前端变化多端的时代,大家也不妨在开发新项目时尝试下新的组件库,说不定比目前使用的好呢~

​ 最后,非常感谢你的阅读,也非常欢迎有兴趣的同学加入我们共建更好的Zarm!

Github开源地址:https://github.com/ZhongAnTech/zarm

觉得不错请给Zarm一个star!

欢迎提出你的issue和PR!

扫描二维码加入官方讨论群
react-ZarmUI基于ReactReactNative的移动端UI组件库 Zarm UI - 基于React、React-Native 的移动端UI组件库 立即下载

相关推荐

三极管吸潮失效分析案例

案例背景三极管也称为晶体三极管,它被视为电子电路中最重要的器件之一。三极管顾名思义具有三个电极,它最主要的功能是电流放大和开关作用。本次失效案例中的三极管在仓库存放一段时间后,在PCBA测试过程中集中发生不良。分析过程1.外观检测对失效样品进行外观检测,未发现明显破损、裂纹等不良。2.X-ray检测对失效样品进行X-ray检测,金线、绑定点未发现异常。3.开封检测对失效样品进行开封检测,发现存在键合点脱落的现象,键合点附近的晶圆破损。4.SEM检测对失效样品进行SEM检测,发现晶圆键合点位置有裂纹和破损,金

sy220504的博客 1043

Zarm 移动端 UI 组件库项目推荐

Zarm 是由众安科技开发的一款基于 React 的移动端 UI 组件库。该项目的主要编程语言包括 TypeScript、JavaScript 和 SCSS。TypeScript 是项目的主要开发语言,用于构建组件和实现逻辑功能;JavaScript 用于辅助实现部分功能;SCSS 则用于样式设计和组件的视觉呈现。 ## 项目核心功能 Zarm 的核心功能是为移动端应用提供一套丰富且易于使用的...

gitblog_01109的博客 583

STM32裸机开发基础:寄存器直接操作详解

寄存器是微控制器内部的特殊存储单元,直接与硬件电路连接,用于控制和监视硬件功能。与普通内存不同,寄存器的每一位(bit)通常都有特定的硬件含义。寄存器就是机器的控制面板上的各种开关和指示灯每个开关控制一个具体功能(如打开LED、启动通信)每个指示灯显示一个具体状态(如数据接收完成、错误发生)// GPIO引脚定义1。

2401_88760782的博客 2188

探索Zarm:打造企业级的React移动UI组件库

**Zarm** 是由众安科技精心研发的一款针对企业级应用的移动端React UI组件库。它不仅注重功能的强大,更强调用户体验的细腻与温馨,正如其名——Zarm,寓意着“za + warm”,旨在为企业带来有温度的技术解决方案。 ## 2、项目技术分析 Zarm构建在React框架之上,提供了丰富的UI组件,包括按钮、单元格等基础元素。其代码结构清晰,易于理解和集成。通过引入`npm inst

gitblog_00044的博客 724

Unity抖音小游戏上架实战:从零到一,详解流程与避坑指南

本文详细介绍了Unity抖音小游戏上架的全流程,包括环境准备、SDK集成、开发者账号注册、软著申请、打包提交流程及常见问题解决方案。重点解析了抖音小游戏平台特有的配置细节和避坑技巧,帮助开发者高效完成游戏上架并优化用户体验。

weixin_33704234的博客 261

C#读取CAD文件(dwg/dxf)并处理

项目要求识别CAD图纸(图纸内容与现实事物比例是1:1)中的内容,并提取出一些关键信息。这里的CAD图纸是指CAD文件,包含多种格式,dwg/dxf/dwf/stl/pdf等等。识别其中内容,主要指文件中的图元信息(也叫实体Entity),指线段、圆弧、矩形等图形元素。得到图元基础信息(比如长度、坐标、粗细)后,进一步做处理(如得到交点、得到线段间间隔、圆弧与线段切点等)。听起来有点难,因为作为软件工程师,对CAD相关事物并不了解,它是未知的;

三千幻想乡 1万+

python-email-validator核心功能解析:语法检查与可送达性验证的完美结合

python-email-validator是一个功能强大的Python库,专门用于电子邮件地址的语法验证和可送达性检查。作为开发者,确保用户输入的电子邮件地址既符合格式规范又能够实际送达,是提升用户体验和数据质量的关键步骤。本文将深入解析该库的核心功能,帮助你轻松掌握电子邮件验证的最佳实践。 ## 一、为什么选择python-email-validator? 在当今的Web应用中,电子邮件验

gitblog_00122的博客 636

DVT Eclipse保姆级入门教程(一)

介绍 waokspace工作区 是Eclipse平台、已安装插件的存储、配置和临时信息的首选项 在工作区可以定义项目,但不需要将源文件导入或者复制到工作区中,可以在项目中指向任何文件夹或者文件; 路径都不要出现中文; 每次启动Eclipse时,都可以创建一个新的工作空间或指定一个现有的工作空间目录; 可以创建许多工作区,每个工作区专用于某种活动。 project项目 首次创建项目时,Eclipse平台会在你指定的目录中创建一个.project项目。 一些插件可能会在项目目录中创建其他信息,例如DVT创

SummerXRT的博客 1万+

【egg.js + react + zarm ui + vite2.0 全栈项目实战:从 0 到 1 实现记账本】小册学习笔记合集(完结)

说明 说明这些文章只是笔者学习记录的笔记,仅供参考。请支持正版的小册。 目录 报错篇 执行 mysqld --install 报错:由于找不到VCRUNTIME140 1.dII, 无法继续执行代码 执行 mysqld --install 报错:Install Remove of the Service Denied 执行 mysqld --install 报错:The service already exists egg.js 项目初始化报错 ConnectionTimeoutError: Connec

学习前端这门手艺,栈底到栈顶依次是:浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等 3229

【YOLOs-CPP-图像分类部署】04-项目优化(加速部署)

本文详细介绍了将YOLO图像分类C++部署项目从CMake迁移到Visual Studio控制台应用的全过程。针对低配CPU性能瓶颈问题,作者通过替换多线程HPP代码为官方实现,并采用448x448固定输入尺寸优化推理速度。项目配置包含OpenCV和ONNX Runtime环境设置,实现了图像批量处理、分类结果显示及结果日志输出功能。关键步骤包括依赖库配置、DLL部署和代码调试,最终在Windows平台成功实现高效CPU推理。该方案显著提升了低配硬件的兼容性,为图像分类任务提供了稳定的部署解决方案。

深耕CV 355

从传统业务到 AI Skill:产品经理也能看懂的能力改造指南(含完整案例)

从传统业务到 AI Skill:产品经理也能看懂的能力改造指南(含完整案例)

专注于编程、AI、人工智能等多个领域内容研究和分析 645

Zarm组件库核心功能揭秘:打造极致用户体验的移动端界面

Zarm是基于React的移动端UI组件库,专为开发者打造极致用户体验的移动界面。它提供了丰富的组件和工具,帮助开发者快速构建美观、交互友好的移动应用。无论是电商购物、社交娱乐还是企业服务类应用,Zarm都能满足你的需求,让你的移动应用开发效率事半功倍。 ## 🌟 Zarm组件库简介 Zarm组件库是一个功能强大、易于使用的移动端UI组件库,它基于React框架开发,提供了丰富的组件和工具,

gitblog_00246的博客 415

万字详解YOLOv8网络结构Backbone/neck/head以及Conv、Bottleneck、C2f、SPPF、Detect等模块

YOLOv8是由Ultralytics开发的最先进的目标检测模型,推升了速度、准确性和用户友好性的界限。YOLO这一缩写代表“你只看一次”(You Only Look Once),通过在一次网络传递中同时预测所有边界框,提升了算法的效率和实时处理能力。相比之下,其他一些目标检测技术需要经过多个阶段或过程来完成检测。YOLOv8在流行的YOLOv5架构上进行了扩展,在多个方面提供了改进。

专注于图像领域,主要研究内容包括计算机视觉和深度学习,特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。 14万+

Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境

项目地址 github:kaimo-cost-h5 涉及知识点 构架工具 Vite 可以参考:【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具 前端框架 React 和路由 react-router-dom React 官方中文文档 – 用于构建用户界面的 JavaScript 库 React Router v6 React Router v5 CSS 预加载器 Less Less 快速入门 | Less.js 中文文档 - Less 中文网 HTTP 请求库 axios ax

学习前端这门手艺,栈底到栈顶依次是:浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等 3332

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

【亲测免费】 Zarm 开源项目使用教程

Zarm 项目的目录结构如下: ``` zarm/ ├── build/ ├── dist/ ├── docs/ ├── examples/ ├── lib/ ├── scripts/ ├── src/ │ ├── components/ │ ├── styles/ │ ├── index.js │ └── ... ├── .babelrc ├── .editorconfig ├...

gitblog_00033的博客 588

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

「面试三板斧」之框架

背景框架是前端面试中的常客。尤其是 React 和 Vue。React 和 Vue 这两个极其优秀的前端类库,基本上占据了前端开发的半壁江山。如果把这两个神仙框架放在一起比较一下, 一定...

azl397985856的专栏 277

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

react + zarm 实现新增账单弹窗封装

需要实现的交互效果 大致如下图: 实现过程 1.先编写新增按钮 先实现点击新增按钮,调出弹窗的功能。 在 src\container\Home\index.jsx 里面添加下面的代码 import CustomIcon from '@/components/CustomIcon' import PopupAddBill from '@/components/PopupAddBill' ... const Home = () => { ... const addRef = useRef()

学习前端这门手艺,栈底到栈顶依次是:浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等 978

新技术:WEB组态能页面嵌套、属性继承吗?

有没有可以支持图纸嵌套、属性暴露的?或者说页面任意嵌套、属性多继承暴露到上层? 这样逐层嵌套,就可以实现复杂页面功能的封装!否则一般的WEB组态编辑都只能做可视化大屏,没法做复杂点的应用页面。

IOTOS的博客 579

ZRAM SWAP

1.ZRAM 1.1 zram的理解 ZRAM(压缩内存)的意思是说在内存中开辟一块区域压缩数据……就是说假设原来150MB的可用内存现在可以放下180MB的东西……本身不会提高内存容量和运行速度……只是让后台程序更少被系统砍掉罢了,为了能得到更多多任务运行……而且这个压缩动作会加重CPU负担…… ZRAM是linux的一种内存优化技术,基本工作原理是:通过划定一片区域,将压缩过后的硬盘数据放入该区域,以实现高速读取。 zram是内存压缩,所有写入内存的东西都会经过压缩,会少量增加CPU负..

纸上得来终觉浅,绝知此事要躬行 2万+

Zarm 开源项目教程

Zarm 是众安科技推出的移动端组件库,旨在为开发者提供高效、易用的前端组件。Zarm 设计了一套简洁、统一的 UI 风格,支持 React 框架,适用于快速构建移动端应用。 ## 项目快速启动 ### 安装 首先,你需要在你的项目中安装 Zarm: ```bash npm install zarm --save ``` ### 引入和使用 在你的 React 项目中引入 Zarm 组

gitblog_00887的博客 519

ios混编flutter相机相册不可用

问题描述: ios项目混编flutter的时候根据官网的方法添加混编代码后,有时候会出现在flutter端使用image_picker插件调用相机相册时,相机相册使用不了的现象 原因分析: 这种情况下一般会出现的问题是,第一次点击调用相机相册时他并不报错也不显示,但后续的点击则会报多次点击,第二次点击的请求被关闭。说明第一次点击已经有效果了只是没有显示出来,这就可能时与ios端的视图层冲突了 解决方案: 在ios的根视图上实现跳转flutter页面,或者将要跳转flutter页面的ios视图设置为根

weixin_44160584的博客 1355

从0到1掌握TaskQ:Golang异步任务队列快速上手指南

TaskQ是一个功能强大的Golang异步任务队列库,支持Redis、SQS、IronMQ和内存等多种后端存储。本文将带你快速掌握TaskQ的核心功能和使用方法,帮助你在项目中轻松实现高效的任务调度与处理。 ## 🚀 TaskQ核心优势解析 TaskQ作为Golang生态中优秀的任务队列解决方案,具有以下显著优势: - **多后端支持**:灵活适配多种存储后端,包括Redis、SQS、Ir

gitblog_00195的博客 882

关于使用Axure RP进行原型开发的一些心得体会

Axure RP(Axure Rapid Prototyping)是一款快速实现、准确表达、带有交互效果且易于上手的原型设计工具。本人在曾参与某系统需求分析时开始接触Axure RP,初步掌握了一定的开发基础,成功制作出系统需求原型,对需求分析工作产生了积极效应。在此经验的基础上,后续又在其他项目中进行了较为成功的运用,并获得了良好的效果。就个人的经验而言,使用Axure RP进行原型开发,一旦掌握

追求卓越 1万+

react-7 组件库 Ant Design Mobile(移动端)

react-7 组件库 Ant Design Mobile(移动端)

qq_60839348的博客 4442

Axure使用教程,产品经理如何用Axure制作一份高质量高保真的OA办公管理系统原型?附源文件下载

OA管理系统、工作台 、日程待办、组织架构、员工管理、员工档案、入职离职管理、转正人事调动、考勤班次、打卡记录、假期规则、考勤表、薪酬体系、薪资核算、工资条、审批管理、审批表单、招聘候选、职位管理、简历设置、绩效考核、绩效设置、考核模板、考核计划、指标评分明细、面谈绩效、社保公积金、参保方案、参保账单、会议室预订、用车还车、资产管理、领用退库、借用归还、调拨盘点、文档库、新闻公告、合同管理、入职培训

PM_beichen的博客 1607

React实现滑动选择插件(仿Antd-mobile Picker)

效果图 需求 由于移动端iOS和安卓原生select样式和效果不同,同一个控件在不同系统上效果不同。所以决定制作一个跟iOS风格类似的,可以滚动,选择器插件。之后看到了antd-mobile里面的picker插件符合我们的要求,使用了一段时间感觉其效果不错,隧查看源码,探究其制作过程。但是antd-mobile是Typescript编写...

weixin_33924770的博客 2777
上一篇: Js中文网周刊第5、6期 —深入了解JavaScript引擎精华,让你的代码执行更高效、web页面录屏实现
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值