Zarm 的命名,灵感来源于众安保险秉承的理念:做有温度的保险。Zarm = za + warm,za代表“众安”,warm有“温暖”的含义,以重合的a字母为中心,各取左右两部分。追求极致的用户体验,致力于做有温度的组件库也是zarm项目发起的初衷。
- iOS
- Android 4.0+
# npm
npm install zarm --save
# yarn
yarn add zarm
<link rel="stylesheet" href="https://unpkg.com/zarm/dist/zarm.min.css">
<script type="text/javascript" src="https://unpkg.com/zarm/dist/zarm.min.js"></script>
import { Button, Cell } from 'zarm';
import 'zarm/dist/zarm.min.css';
注意:zarm 默认支持基于 ES module 的 tree shaking,不使用以下插件也会有按需加载的效果。
- 使用 babel-plugin-import 自动加载Sass文件(推荐)
// .babelrc or babel-loader option
{
"plugins": [
['import', {
libraryName: 'zarm',
style: true, // or 'css'
}],
]
}
import { Button, Cell } from 'zarm';
- 手动引入
import Button from 'zarm/lib/button'; // 加载js
import 'zarm/lib/button/style/css'; // 加载css
// import 'zarm/lib/button/style'; // 加载scss
通过修改css变量定义达到定制主题的效果
document.documentElement.style.setProperty('--theme-primary', '#108ee9');
变量名可参考 default.scss
issue | gitter | 微信群 |
---|---|---|
github issue | ZhonganTech/zarm |
MIT