npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tinper-bee

v2.4.0

Published

React Components living for enterprise-class pc backend application

Downloads

1,053

Readme

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 (
    <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:[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 反馈及需求提交