zw

zarm-web

基于 React 的桌面端UI组件库

Showing:

Popularity

Downloads/wk

72

GitHub Stars

140

Maintenance

Last Commit

5mos ago

Contributors

40

Package

Dependencies

7

Size (min+gzip)

87.0KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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 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 } 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial