题库的UI组件,提取为依赖库并统一发布在npm
npm install
npm run storybook
open http://localhost:3001/
npm install --save @zhike/ti-ui
npm install --save aphrodite
npm install --save react-custom-scrollbars
import React from 'react'
import { Button } form '@zhike/ti-ui'
class MyComponent extends React.Component {
render(
return (
<Button text="按钮"></Button>
)
)
}
export default MyComponent
- 修改
package.json
文件的版本号
- 打包到
lib
文件夹并发布
npm run build
npm publish
propName |
required |
type |
default |
option |
text |
true |
string |
|
|
className |
|
|
undefined |
|
textClassName |
|
|
undefined |
|
leftIcon |
|
|
undefined |
|
rightIcon |
|
|
undefined |
|
theme |
|
string |
'' |
'darken', 'hollow' |
onClick |
|
func |
undefined |
|
isAvailable |
|
bool |
true |
|
loading |
|
bool |
false |
|
propName |
required |
type |
default |
option |
width |
|
string |
14 |
|
height |
|
string |
14 |
|
marginLeft |
|
string |
0 |
|
marginRight |
|
string |
0 |
|
source |
|
string |
'' |
|
propName |
required |
type |
default |
option |
className |
|
|
undefined |
|
注:支持 img 标签原生属性
propName |
required |
type |
default |
option |
className |
|
|
undefined |
|
注:支持 input 标签原生属性
propName |
required |
type |
default |
option |
className |
|
|
undefined |
|
注:支持 textarea 标签原生属性
propName |
required |
type |
default |
option |
className |
|
|
undefined |
|
注:支持 div 标签原生属性
propName |
required |
type |
default |
desc |
className |
|
object |
undefined |
|
width |
|
string |
'100%' |
|
height |
|
string |
'100%' |
|
onScroll |
|
func |
() => {} |
天然滚动事件调用 |
onScrollFrame |
|
func |
() => {} |
动画帧内运行。通行证关于当前的滚动位置的一些方便的值 |
onScrollStop |
|
func |
() => {} |
当滚动停止时调用 |
onScrollStart |
|
func |
() => {} |
滚动开始时调用 |
onUpdate |
|
func |
() => {} |
在组件更新时调用。在动画帧内运行 |