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，见 这里。

更多内容请移步我们的官网

tinper-bee组件组织

参与讨论和开发

如在使用过程中遇到任何问题，可以在这里提交issue反馈；

或者直接fork代码到你的github仓库，提交pull request给我们。

有紧急问题可以直接邮件给我（Email：[e-mail]）

开发及构建

开发者可以一起参与为 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 [e-mail]:iuap-design/tinper-bee.git

然后进入目录安装依赖：

$ npm install

接下来，执行 gulp：

$ gulp

反馈

Bug 反馈及需求提交

Changelog

tinper-bee@2.3.5

• bee-pagination@2.0.15
  • 🐞 [ Fixbug ] 只有一页的情况下，仍然可以上下翻页。
  • 🌟 [ Feature ] 默认英文修改。
• bee-input-number@2.2.24
  • 🌟 [ Feature ] 新增 handleBtnClick 点击右侧按钮的回调API。
  • 🌟 [ Feature ] 默认英文修改。
• bee-tooltip@2.1.6
  • 🐞 [ Fixbug ] 解决宽度设置无效问题。
• bee-popover@3.1.0
  • 🌟 [ Feature ] 支持弹框根据内容宽度自动撑开。
• bee-modal@2.1.11
  • 🐞 [ Fixbug ] 修复 container 设置无效问题。
  • 🌟 [ Feature ] api调用方式新增locale属性,设置按钮文字。
  • 🌟 [ Feature ] content 高度实现自由伸缩。
  • 🌟 [ Feature ] 新增confirm第二种形态。
  • 🌟 [ Feature ] 第二种形态样式修改
• bee-table@2.2.40
  • 🐞 [ Fixbug ] 解决treetable右侧出现空白的问题。
  • 🐞 [ Fixbug ] 解决模态框中表格滚动条计算问题。
  • 🐞 [ Fixbug ] 过滤行多语设置bug。
  • 🐞 [ Fixbug ] 表格单元格渲染空列问题修改。
  • 🌟 [ Feature ] 默认英文修改。
  • 🌟 [ Feature ] isLeaf 改为 _isLeaf
  • 🐞 [ Fixbug ] 设置expandRowByClick，无法显示箭头，去掉 expandRowByClick 判断。
  • 🌟 [ Feature ] 增加参数 minColumnWidth，设置拖拽列宽度的最小限制。
  • 🐞 [ Fixbug ] column 不设置 key 时的容错及提示。IFNC-1019
• bee-tree@2.1.14
  • TAB键选中树后，默认聚焦在第一个（已选中）节点，并显示 focus 状态。
  • autoExpandParent 未生效问题。
• bee-radio@2.1.2
  • 🐞 [ Fixbug ] 解决 radioGroup 不受控的问题。
  • 🌟 [ Feature ] radioGroup 增加 disabled 属性。
  • 🌟 [ Feature ] 增加focus标识。
• bee-cascader@2.1.7
  • 🐞 [ Fixbug ] props 报错。
• bee-datepicker@2.3.15
  • 🌟 [ Feature ] 增加参数enterKeyDown，回车不打开面板。
  • 🌟 [ Feature ] 输入框校验宽松,支持moment所有合法类型。
  • 🌟 [ Feature ] 合法性判断改为 moment(str,format)||moment(str)。
• bee-checkbox@2.0.10
  • 🌟 [ Feature ] 增加focus标识。
• bee-locale@1.0.4
  • 🌟 [ Feature ] 默认英文修改。
• bee-tools@1.0.8
  • 🐞 [ Fixbug ] build路径错误。
• bee-clipboard@2.0.3
  • 🌟 [ Feature ] 默认英文修改。
• bee-complex-grid@2.1.3
  • 🌟 [ Feature ] 默认英文修改。
• bee-search-panel@3.0.2
  • 🌟 [ Feature ] 默认英文修改。