# tinper-bee

> React Components living for enterprise-class pc backend application

Latest version **2.4.0** (published 2020-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install tinper-bee
pnpm add tinper-bee
yarn add tinper-bee
bun add tinper-bee
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.0 |
| Published | 2020-08-13 |
| First published | 2016-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 66 |
| Unpacked size | 40.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 539 |
| Author | iuap |
| Maintainers | ahua52, banyudu, bjyxszd, boyuzhou, guoyongfeng, huayingjie, jonyw, kvkens, liushaozhen, liuyk, npm_yx, tinper-bot, whizbz, yangchch, yonyoufed, zhaoyuchief |
| Keywords | react, react-component, component, components, ui, framework, frontend, tinper, tinper-bee, bee |

## Links

- npm: https://www.npmjs.com/package/tinper-bee
- Repository: https://github.com/iuap-design/tinper-bee
- Homepage: https://github.com/iuap-design/tinper-bee#readme
- Issues: https://github.com/iuap-design/tinper-bee/issues
- npm.io page: https://npm.io/package/tinper-bee

## Dependencies (66)

- [bee-dnd](https://npm.io/package/bee-dnd.md) 3.0.0
- [bee-tag](https://npm.io/package/bee-tag.md) 0.0.4
- [bee-form](https://npm.io/package/bee-form.md) 2.0.13
- [bee-icon](https://npm.io/package/bee-icon.md) 1.0.15
- [bee-rate](https://npm.io/package/bee-rate.md) 2.0.4
- [bee-step](https://npm.io/package/bee-step.md) 2.0.3
- [bee-tabs](https://npm.io/package/bee-tabs.md) 3.0.3
- [bee-tile](https://npm.io/package/bee-tile.md) 1.0.0
- [bee-tree](https://npm.io/package/bee-tree.md) 2.1.22
- [bee-affix](https://npm.io/package/bee-affix.md) 1.0.18
- [bee-alert](https://npm.io/package/bee-alert.md) 2.0.1
- [bee-badge](https://npm.io/package/bee-badge.md) 2.0.1
- [bee-label](https://npm.io/package/bee-label.md) 1.0.1
- [bee-menus](https://npm.io/package/bee-menus.md) 2.0.14
- [bee-modal](https://npm.io/package/bee-modal.md) 2.2.3
- [bee-panel](https://npm.io/package/bee-panel.md) 2.0.2
- [bee-radio](https://npm.io/package/bee-radio.md) 2.1.6
- [bee-table](https://npm.io/package/bee-table.md) 2.2.61
- [bee-anchor](https://npm.io/package/bee-anchor.md) 0.0.6
- [bee-button](https://npm.io/package/bee-button.md) 2.0.20
- [bee-drawer](https://npm.io/package/bee-drawer.md) 0.0.7
- [bee-layout](https://npm.io/package/bee-layout.md) 1.2.8
- [bee-locale](https://npm.io/package/bee-locale.md) 1.0.6
- [bee-navbar](https://npm.io/package/bee-navbar.md) 2.0.1
- [bee-select](https://npm.io/package/bee-select.md) 2.0.26
- [bee-slider](https://npm.io/package/bee-slider.md) 2.0.2
- [bee-switch](https://npm.io/package/bee-switch.md) 2.0.7
- [bee-upload](https://npm.io/package/bee-upload.md) 2.1.3
- [bee-animate](https://npm.io/package/bee-animate.md) 1.0.0
- [bee-backtop](https://npm.io/package/bee-backtop.md) 1.0.2
- [bee-loading](https://npm.io/package/bee-loading.md) 3.0.1
- [bee-message](https://npm.io/package/bee-message.md) 2.1.7
- [bee-overlay](https://npm.io/package/bee-overlay.md) 1.0.32
- [bee-popover](https://npm.io/package/bee-popover.md) 3.1.1
- [bee-svgicon](https://npm.io/package/bee-svgicon.md) 0.0.2
- [bee-tooltip](https://npm.io/package/bee-tooltip.md) 2.1.8
- [bee-calendar](https://npm.io/package/bee-calendar.md) 2.1.3
- [bee-carousel](https://npm.io/package/bee-carousel.md) 1.0.2
- [bee-cascader](https://npm.io/package/bee-cascader.md) 2.1.8
- [bee-checkbox](https://npm.io/package/bee-checkbox.md) 2.0.11
- [bee-collapse](https://npm.io/package/bee-collapse.md) 1.0.3
- [bee-dropdown](https://npm.io/package/bee-dropdown.md) 2.0.12
- [bee-timeline](https://npm.io/package/bee-timeline.md) 2.0.2
- [bee-transfer](https://npm.io/package/bee-transfer.md) 2.0.13
- [bee-clipboard](https://npm.io/package/bee-clipboard.md) 2.0.5
- [bee-breadcrumb](https://npm.io/package/bee-breadcrumb.md) 2.0.2
- [bee-datepicker](https://npm.io/package/bee-datepicker.md) 2.3.28
- [bee-form-group](https://npm.io/package/bee-form-group.md) 2.0.1
- [bee-pagination](https://npm.io/package/bee-pagination.md) 3.0.2
- [bee-popconfirm](https://npm.io/package/bee-popconfirm.md) 2.0.2
- [bee-timepicker](https://npm.io/package/bee-timepicker.md) 2.0.14
- [bee-transition](https://npm.io/package/bee-transition.md) 1.0.0
- [bee-colorpicker](https://npm.io/package/bee-colorpicker.md) 0.0.15
- [bee-input-group](https://npm.io/package/bee-input-group.md) 2.0.4
- [bee-page-layout](https://npm.io/package/bee-page-layout.md) 1.0.1
- [bee-tree-select](https://npm.io/package/bee-tree-select.md) 0.0.7
- [bee-autocomplete](https://npm.io/package/bee-autocomplete.md) 2.0.5
- [bee-button-group](https://npm.io/package/bee-button-group.md) 2.0.2
- [bee-complex-grid](https://npm.io/package/bee-complex-grid.md) 2.2.1
- [bee-form-control](https://npm.io/package/bee-form-control.md) 2.0.24
- [bee-input-number](https://npm.io/package/bee-input-number.md) 2.2.40
- [bee-notification](https://npm.io/package/bee-notification.md) 2.0.5
- [bee-progress-bar](https://npm.io/package/bee-progress-bar.md) 2.0.2
- [bee-search-panel](https://npm.io/package/bee-search-panel.md) 3.0.2
- [bee-loading-state](https://npm.io/package/bee-loading-state.md) 2.0.5
- [bee-input-group-addon](https://npm.io/package/bee-input-group-addon.md) 2.0.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.4.0 (latest) — 2020-08-13
- 2.4.0-alpha.1 (alpha) — 2020-08-13
- 2.3.7-beta2 (beta) — 2020-06-20
- 2.2.5 — 2024-05-17
- 2.2.3-beta.4 — 2024-05-16
- 2.2.3-beta.3 — 2024-05-16
- 2.2.3-beta.2 — 2024-05-16
- 2.2.3-beta.1 — 2024-05-16
- 2.2.3-beta.0 — 2024-05-15
- 2.4.0-alpha.0 — 2020-07-30
- 2.3.9 — 2020-07-26
- 2.3.9-alpha.0 — 2020-07-26
- 2.3.8 — 2020-06-20
- 2.3.7 — 2020-05-15
- 2.3.7-beta1 — 2020-05-15
- … 224 more at https://npm.io/package/tinper-bee/versions

## README

<img src="http://tinper.org/assets/images/bee.png" width="120" />

# tinper-bee

[![npm version](https://img.shields.io/npm/v/tinper-bee.svg)](https://www.npmjs.com/package/tinper-bee)
[![Build Status](https://img.shields.io/travis/iuap-design/tinper-bee/master.svg)](https://travis-ci.org/iuap-design/tinper-bee)
[![Coverage Status](https://coveralls.io/repos/github/iuap-design/tinper-bee/badge.svg?branch=master)](https://coveralls.io/github/iuap-design/tinper-bee?branch=master)
[![NPM downloads](http://img.shields.io/npm/dm/tinper-bee.svg?style=flat)](https://npmjs.org/package/tinper-bee)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/iuap-design/tinper-bee.svg)](http://isitmaintained.com/project/iuap-design/tinper-bee "Average time to resolve an issue")
[![Percentage of issues still open](http://isitmaintained.com/badge/open/iuap-design/tinper-bee.svg)](http://isitmaintained.com/project/iuap-design/tinper-bee "Percentage of issues still open")


tinper-bee（[官网链接](http://bee.tinper.org/) ）是一套基于 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

[版本号查阅](http://bee.tinper.org/tinper-bee/changelog)

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
│
└─


```

## 开发文档

开发文档详见[这里](https://github.com/iuap-design/tinper-bee/docs)。

如果你的项目要兼容ie8，见 [这里](https://github.com/iuap-design/neoui-react/blob/master/docs/react-ie8.md)。

更多内容请移步我们的[官网](http://bee.tinper.org/)

[tinper-bee组件组织](https://github.com/tinper-bee)

## 参与讨论和开发

如在使用过程中遇到任何问题，可以在[这里](https://github.com/iuap-design/tinper-bee/issues)提交issue反馈；

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

有紧急问题可以直接邮件给我（Email：guoyff@yonyou.com）


## 开发及构建

开发者可以一起参与为 tinper-bee 贡献代码，同时也可以基于 tinper-bee 进行二次开发或封装插件。

[tinper-bee components organization](https://github.com/tinper-bee)

## 目录结构

```
bower.json
CHANGELOG.md
CONTRIBUTING.md
build/
assets/
docs/
gulpfile.js
package.json
README.md
style/
tests/
webpack.conf.js
```

## 构建工具

tinper-bee 使用 [gulp.js](http://gulpjs.com/) 和 [webpack](https://webpack.github.io/)  构建项目。

克隆项目文件:

```
$ git clone git@github.com:iuap-design/tinper-bee.git
```

然后进入目录安装依赖：

```
$ npm install
```

接下来，执行 `gulp`：

```
$ gulp
```


## 反馈

[Bug 反馈及需求提交](CONTRIBUTING.md)

---
_Source: https://npm.io/package/tinper-bee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._