Need help with tinper-bee?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iuap-design
484 Stars 63 Forks MIT License 391 Commits 9 Opened issues

Description

🐝 一套基于 react.js 和 iuap design 设计语言实现的前端组件库 http://bee.tinper.org

Services available

!
?

Need anything else?

Contributors list

tinper-bee

npm version Build Status Coverage Status NPM downloads Average time to resolve an issue Percentage of issues still open

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 ( hello world ) } }

export default Example;

使用CDN

版本号查阅

css样式

//引入指定版本号


//始终引入最新版本

js

//始终引入最新版本


//引入指定版本号

并且,在你的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:[email protected]

开发及构建

开发者可以一起参与为 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.jswebpack 构建项目。

克隆项目文件:

$ git clone [email protected]:iuap-design/tinper-bee.git

然后进入目录安装依赖:

$ npm install

接下来,执行

gulp
$ gulp

反馈

Bug 反馈及需求提交

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.