zq-react-ui-pack


!GitHub last commit (branch)

给自己项目定制的UI Kit, 主要目的为了统一各个模块的样式和写法。

Getting Start

项目基于 React , Material Design 风格开发。故如果想继续使用的话，需要接受 MD 风格。

内部使用了 mobx以及 mobx-react, 来提升开发效率, 所以很适合已经大面积使用 mobx, mobx-react 的项目。

另外由于是高度封装的库了, 所以依赖很重。(绝大部分涉及UI框架的库, 依赖都会很重),依赖详见 Prerequisties

Prerequisites

你必须安装以下依赖:

$3

- react
- react-dom
- styled-components（css-in-js 解决方案）
- mobx (状态管理)
- mobx-react
- styled-icons (图标库, Material风格)
- moment (用于时间操作)

install

推荐使用 yarn 安装:
``shell
yarn add zq-react-ui-pack
`

Api

$3

`javascript
import { Button } from "zq-react-ui-pack";

按钮
`
prop| type | default| desc
--------------| ------------------ |------------------|----|
type | string| default| 按钮样式, [primary,default,revert]
shape| string| default| 按钮形状 [default]
tagName| string | button| 按钮html标签 [button,a] e.g. 例如使用 a标签， 那么 最后渲染在页面的按钮会是 按钮

#### Button.Icon
`javascript
import { Button } from "zq-react-ui-pack";
import { VerticalAlignTop } from "styled-icons/material";
type={"primary"}
size={24}
icon={VerticalAlignTop}
/>
`
prop| type| default| desc
-----| -----|---------|--------|
type| string| default| 按钮样式, [primary,default,revert]
size| int | 24` | 按钮大小, 因为这是使用svg渲染的图标, style的font-size对其无用,故使用 size表明其大小
icon| styled-icons | null | styled-icons 图标