biz-ux
v0.1.67
Published
B端通用组件库
Downloads
146
Readme
BizUX组件库
biz-ux
组件库是基于 React
的 PC
端 组件库,有以下几个特点
- 基于
antd
的API设计,兼容antd组件 - 粒度小,强调单一职责
- 基于
Typescript
开发,提供类型信息,方便使用 - 特色的表单和滚动条解决方案
环境支撑
现代浏览器,IE9 以上
安装
npm install biz-ux --save
使用
全部引入方式:
应用入口引入 css:
import 'biz-ux/dist/biz-ux.css';
组件引入:
import { Checkbox } from 'biz-ux';
import React,{Component} from 'react';
class Demo extends Component{
constructor(props,context){
super(props,context);
const me=this;
me.state = {checked:false};
}
onChange(checked){
this.setState({
checked
})
}
render(){
const me=this;
const {
checked
}=me.state;
return (
<Checkbox checked={checked} onChange={me.onChange.bind(me)} />
)
}
}
按需引入:
安装插件
npm i babel-plugin-import --save-dev
在 babel 7
的 babel.config.js
文件配置如下:
module.exports = function (api) {
api.cache(true);
const presets = [
// env ,react 等 presets
];
const plugins = [
// 其他插件
[
"babel-plugin-import",
{
"libraryName": "biz-ux",
"libraryDirectory":"es",
"style": true
},
"biz-ux"
]
];
return {
presets,
plugins
};
}
组件引入:
import { Checkbox } from 'biz-ux';
被插件替换为:
import Checkbox from 'biz-ux/es/checkbox';
import 'biz-ux/es/style';
组件开发
组件创建:
参考 /template/component
目录的结构创建组件,使用下面的命令启动开发模式:
npm run dev <name>
文档调试:
npm run doc:dev
组件开发规范见:组件开发规范