tinper-bee 介绍
tinper-bee
tinper-bee(官网链接 )是一套基于 React.js
的开源组件库,它从丰富的企业级中后台应用场景中实战沉淀而来,为复杂应用的快速开发提供一致性 UI 解决方案。
关键特性
遵循设计语言/规范,提供一致性 UI 体验
提供完善、高质量的基础组件体系,以及基于之上的业务组件体系
详细的文档+示例的友好使用体验,提供友好易用的API文档
提供具备强大功能的 Grid 组件,满足多种复杂业务场景需求
六大公共特性:支持兼容性处理、支持全键盘能力、支持国际化、支持多端适配 、支持自定义主题、企业级特性
快速开始
安装 tinper-bee
可使用 npm、cnpm、yarn 以及 ynpm 来安装组件库以及组件。
npm install tinper-bee --save
项目中使用 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;
使用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' }
注意事项
另外,有几个组件因为使用的第三方的包比较大,所以我们没有将它们打包进tinper-bee.js,只是对他进行了转码,引入方式略有变化,包含组件如下。
Datepicker日期选择组件、Timepicker时间选择组件、Dnd拖拽组件、Calendar日历组件。
这些组件使用如下方式引入,不需要单独引入样式。 css的引入方式不变
import Datepicker from 'tinper-bee/lib/Datepicker'; import Timepicker from 'tinper-bee/lib/Timepicker'; import Dnd from 'tinper-bee/lib/Dnd'; import Calendar from 'tinper-bee/lib/Calendar'; import Carousel from 'tinper-bee/lib/Carousel'; import Viewer from 'bee-viewer';
目录及文件说明
提供的资源目录结构
/ │ ├─assets │ base.css │ component.css │ ├─build │ tinper-bee.js │ tinper-bee.min.js │ └─
开发文档
开发文档详见这里。
如果你的项目要兼容ie8,见 这里。
更多内容请移步我们的官网
参与讨论和开发
如在使用过程中遇到任何问题,可以在这里提交issue反馈;
或者直接fork代码到你的github仓库,提交pull request给我们。
有紧急问题可以直接邮件给我(Email:guoyff@yonyou.com)
开发及构建
开发者可以一起参与为 tinper-bee 贡献代码,同时也可以基于 tinper-bee 进行二次开发或封装插件。
tinper-bee components organization
目录结构
bower.json CHANGELOG.md CONTRIBUTING.md build/ assets/ docs/ gulpfile.js package.json README.md style/ tests/ webpack.conf.js
构建工具
tinper-bee 使用 gulp.js 和
webpack 构建项目。
克隆项目文件:
$ git clone git@github.com:iuap-design/tinper-bee.git
然后进入目录安装依赖:
$ npm install
接下来,执行 gulp:
$ gulp
反馈
tinper-bee 官网
https://github.com/iuap-design/tinper-bee
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。