Zq-react-ui-pack NPM

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

你必须安装以下依赖:

dependencies

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

install

推荐使用 yarn 安装:

yarn add zq-react-ui-pack

Api

Button

import { Button } from "zq-react-ui-pack";
    
<Button>按钮</Button>

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

Button.Icon

import { Button } from "zq-react-ui-pack";
import { VerticalAlignTop } from "styled-icons/material";
<Button.Icon  
  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 图标