-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
快速开始
tinper-bee 组件库 致力于提供给程序员愉悦快速的开发体验。
一、安装 tinper-bee
可使用 npm、cnpm、yarn 以及 ynpm 来安装组件库以及组件。
npm install --save tinper-bee二、项目中使用 tinper-bee
为了方便用户单独处理样式和js文件，所以我们对js和css进行了单独的打包。
import React,{ Component } from 'react';
//tinper-bee 组件库js引用
import { Button,Panel } from 'tinper-bee';
//tinper-bee 组件库 css 引用
import 'tinper-bee/assets/tinper-bee.css';
//项目样式
import './index.less';
class Example extends Component{
constructor(props) {
super(props);
}
render(){
return (
<Panel>
hello world
</Panel>)
}
}
export default Example；
~~~~~~ o(￣▽￣)ｄ ~~~~~~
三、使用CDN
- css样式
//引入指定版本号
<link href="//design.yonyoucloud.com/static/tinper-bee/[版本号]/assets/tinper-bee.css">
//始终引入最新版本
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css">- js
//始终引入最新版本
<script src="//design.yonyoucloud.com/static/tinper-bee/[版本号]/build/tinper-bee.js"></script>
//引入指定版本号
<script src="//design.yonyoucloud.com/static/tinper-bee/latest/build/tinper-bee.js"></script>
并且，在你的webpack处，配置
externals: {
'tinper-bee': 'TinperBee'
}四、单个使用个别组件
无法使用主题定制
import React,{ Component } from 'react';
//Button 组件库js引用
import Button from 'bee-button';
//Button 组件库 css 引用
import 'bee-button/build/Button.css';
class Example extends Component{
render(){
return (
<Button >Button</Button>)
}
}
export default Example；
北京市海淀区北清路68号用友产业园
guoyff@yonyou.com