关键特性
- 遵循设计语言/规范，提供一致性 UI 体验
- 遵循BIP(商业创新平台)的UE设计规范
- 兼容tinper-bee(v2.x/v3.x)组件库的api
- 兼容ant-design(v4.x)组件库的api
- 提供完善、高质量的基础组件体系，以及基于之上的业务组件体系
- 详细的文档+示例的友好使用体验，提供友好易用的API文档
- 提供具备强大功能的 Grid 组件，满足多种复杂业务场景需求
- 六大公共特性：支持兼容性处理、支持全键盘能力、支持国际化、企业级特性
快速开始
安装 @tinper/next-ui
首先安装ynpm
npm install ynpm-tool -g
在用 ynpm 来安装组件库以及组件。
ynpm install @tinper/next-ui --save
项目中使用
为了方便用户单独处理样式和js文件，所以我们对js和css进行了单独的打包。
import React,{ Component } from 'react';
///组件库 js 引用
import { Button } from '@tinper/next-ui';
///组件库 css 引用 ，建议：放到 index.html 使用<style>引入
import '@tinper/next-ui/dist/tinper-next.css';
class Example extends Component{
constructor(props) {
super(props);
}
render(){
return (
<Button>
hello world
</Button>)
}
}
export default Example；
引入方式一：使用package.json依赖引入
{
"dependencies": {
"@tinper/next-ui": "latest",
}
}
引入方式二：使用CDN方式外部引入
首先，需要确保React\React-Dom在加载TinperNext之前进行引入(TinperNext内部不包含React\React-Dom)，否则会报错：TinperNext is not defined
引入React/ReactDom
<script src="https://static-aio.yonyoucloud.com/??react/16.14.0/umd/react.production.min.js,react-dom/16.14.0/umd/react-dom.production.min.js"></script>
引入css样式
//引入指定版本号
<link href="//design.yonyoucloud.com/static/tinper-next/[版本号]/tinper-next.css" type="text/css" rel="stylesheet" />
//始终引入最新snapshot版本-开发版本-一般更新周期：1-3天
<link href="//design.yonyoucloud.com/static/tinper-next/snapshot/tinper-next.css" type="text/css" rel="stylesheet" />
//始终引入最新beta版本-体验版本-一般更新周期：1-2周
<link href="//design.yonyoucloud.com/static/tinper-next/beta/tinper-next.css" type="text/css" rel="stylesheet" />
//始终引入最新release版本-稳定版本-一般更新周期：1-3月
<link href="design.yonyoucloud.com/static/tinper-next/release/tinper-next.css" type="text/css" rel="stylesheet" />
引入js脚本
//引入指定版本号
<script src="//design.yonyoucloud.com/static/tinper-next/[版本号]/tinper-next.min.js"></script>
//始终引入最新snapshot版本-开发版本-一般更新周期：1-3天
<script src="//design.yonyoucloud.com/static/tinper-next/snapshot/tinper-next.min.js"></script>
//始终引入最新beta版本-体验版本-一般更新周期：1-2周
<script src="//design.yonyoucloud.com/static/tinper-next/beta/tinper-next.min.js"></script>
//始终引入最新release版本-稳定版本-一般更新周期：1-3月
<script src="//design.yonyoucloud.com/static/tinper-next/release/tinper-next.min.js"></script>
并且，在你的webpack处，配置
externals: {
'@tinper/next-ui': 'TinperNext'
}
引入开发态(非压缩版)JS
只需要把cdn(url)地址中的文件名：tinper-next.min.js 改为 tinper-next.dev.js 即可。
如何查看运行时的版本号
只需要在浏览器F12控制台(console)，输入 window.TinperNext.version 即可。
参与讨论和开发
如在使用过程中遇到任何问题
可以在TinperNext官方支持群反馈;
可以在这里提交Jira反馈；
- Jira项目：云平台-前端基础技术 (QDJCJS)
- Jira领域：tinper-next
- Jira模块：前端UI组件
有紧急问题可以直接邮件给我（Email：zhuzj@yonyou.com）