Zarm UI

众安科技移动端UI组件库

安装

npm install zarm --save

使用

• npm方式引入

import { Button, Cell } from 'zarm';
import 'zarm/styles/index.scss';

或者单独引入

import Button from 'zarm/lib/Button';
import 'zarm/styles/core/index.scss';
import 'zarm/styles/components/Button.scss';

调用方法

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<Button theme="primary">按钮</Button>, document.getElementById('app'));

• 也可以浏览器直接引入（不推荐）

html 标签引入css和js文件

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/zarm.min.css">

<script src="https://unpkg.com/[email protected]/dist/react.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js" type="text/javascript"></script>

<script type="text/javascript" src="https://unpkg.com/zarm@latest/dist/zarm.min.js"></script>

调用方法

ReactDOM.render(<Zarm.Button theme="primary">按钮</Zarm.Button>, document.getElementById('app'));

注：使用以上方法需要支持jsx语法或者经过编译

自定义主题

import { Button, Cell } from 'zarm';
import './styles/index.scss';

./style/index.scss 文件内容如下：

@import "node_modules/zarm/styles/core/index";
@import "variables";
@import "node_modules/zarm/styles/components/index";

通过自己的variables文件重写sass变量。

甚至可以拷贝 ./node_modules/zarm/styles 文件，自行修改组件的sass文件。

更新日志

CHANGELOG.md