Build Status FOSSA Status Coverage Status npm package NPM downloads JS gzip size CSS gzip size Netlify Status
众安科技基于 React 研发的一款适用于企业级的桌面端 UI 组件库。
Zarm 是其移动端版本的实现。
Zarm 的命名,灵感来源于众安保险秉承的理念:做有温度的保险。Zarm = za + warm,za 代表"众安",warm 有"温暖"的含义,以重合的 a 字母为中心,各取左右两部分。追求极致的用户体验,致力于做有温度的组件库也是 zarm 项目发起的初衷。
# npm npm install zarm-web@alpha --save # yarn yarn add zarm-web@alpha
<link rel="stylesheet" href="https://unpkg.com/zarm-web@alpha/dist/zarm-web.min.css" /> <script type="text/javascript" src="https://unpkg.com/zarm-web@alpha/dist/zarm-web.min.js"></script>
import { Button, Input } from 'zarm-web'; import 'zarm-web/dist/zarm-web.min.css';
注意:zarm-web 默认支持基于 ES module 的 tree shaking,不使用以下插件也会有按需加载的效果。
- 使用 babel-plugin-import 自动加载 Sass 文件(推荐)
// .babelrc or babel-loader option { "plugins": [ ['import', { libraryName: 'zarm-web', style: true, // or 'css' }], ] }
import { Button } from 'zarm-web';
- 手动引入
import Button from 'zarm-web/lib/button'; import 'zarm-web/lib/button/style/css'; // 加载css // import 'zarm-web/lib/button/style'; // 加载scss
通过修改 css 变量定义达到定制主题的效果
document.documentElement.style.setProperty('--theme-primary', '#108ee9');
变量名可参考 variable.scss
| issue |
|---|
| github issue |
MIT