一、开源项目简介

众安科技基于 React 研发的一款适用于企业级的移动端 UI 组件库。

Zarm （读音 /zɑːm/，中文可发音为 扎姆）的命名，灵感来源于众安保险秉承的理念：做有温度的保险。Zarm = za + warm，za 代表 “众安”，warm 有 “温暖” 的含义，以重合的 “a” 字母为中心，各取左右两部分。追求极致的用户体验，致力于做有温度的组件库也是 zarm 项目发起的初衷。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特性

• 提炼自企业级移动端产品的交互语言和视觉风格，逐步培养用户的视觉心里和行为习惯。
• 高质量的前端代码的实现。
• 形成规范和标准，降低设计、开发的人力成本和沟通成本。
• 配合工具体系，帮助业务快速完成高质量的产品原型。
• 提供国际化解决方案，多语言支持。
• 使用 TypeScript 开发，支持静态检查，提升开发体验。

Zarm众安科技移动端组件库

通用（2）

• Button按钮
• Icon图标

数据录入（15）

• Calendar日历
• Cascader级联选择器
• Checkbox复选框
• CustomInput自定义输入框
• DatePicker日期选择器
• FilePicker文件选择器
• Input文本框
• Keyboard虚拟键盘
• Picker选择器
• Radio单选框
• Rate评分
• SearchBar搜索栏
• Slider滑动输入条
• Stepper步进器
• Switch开关

操作反馈（11）

• ActionSheet动作面板
• Loading加载中
• Message消息
• Modal模态框
• PinchZoom缩放
• Popper气泡层
• Popup弹出框
• Pull上拉加载下拉刷新
• Skeleton骨架屏
• SwipeAction滑动操作
• Toast轻提示

数据展示（12）

• Badge徽标
• Carousel走马灯
• Collapse折叠面板
• Image图片
• ImagePreview图片预览
• List列表
• Marquee滚动
• NoticeBar通告栏
• Panel面板
• Progress进度条
• Tooltip文字提示
• WaterMark水印

导航（5）

• Affix固钉
• Grid宫格
• NavBar导航栏
• TabBar标签栏
• Tabs标签页

钩子（5）

• useClickAway单击外部跟踪器
• useInViewport进入浏览器窗口
• useLongPress长按
• useOrientation屏幕方向
• useScroll滚动

其他（3）

• BackTop返回顶部
• ConfigProvider全局配置
• Mask遮罩层

五、技术选型

兼容性

• iOS Safari 10+
• Android 5+

如需兼容更低端的浏览器版本，需要提供相应的 Polyfill 支持，请参考 README.md 文档。

安装

npm 或 yarn 安装

# npm
$ npm install zarm --save

# yarn
$ yarn add zarm

使用

import { Button, Cell } from 'zarm';
import 'zarm/dist/zarm.css';