/zarm-web

基于React的桌面端UI组件库

Primary LanguageTypeScriptMIT LicenseMIT

Zarm-Web

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 或 yarn 安装(推荐)

# npm
npm install zarm-web@alpha --save

# yarn
yarn add zarm-web@alpha

或者通过 link 和 script 标签分别引入样式文件和js脚本文件(不推荐)

<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,不使用以下插件也会有按需加载的效果。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ['import', {
        libraryName: 'zarm-web',
        style: true,  // or 'css'
      }],
    ]
  }
import { Button, Cell } 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

FOSSA Status