@zhike/ti-ui NPM

ti-UI

题库的UI组件，提取为依赖库并统一发布在npm

demo

npm install
npm run storybook
open http://localhost:3001/

使用指南

安装

npm install --save @zhike/ti-ui

安装项目依赖，如已安装可跳过

基础框架 React :

npm install --save react

CSS-in-JS 框架 aphrodite :

npm install --save aphrodite

如果需要使用 Scrollbar的话

react-custom-scrollbars 框架 scrollbars :

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

API

Button

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

Icon

propName	type	default
width	string	14
height	string	14
marginLeft	string	0
marginRight	string	0
source	string	''

Image

propName	required	type	default	option
className			undefined

注：支持 img 标签原生属性

Input

propName	required	type	default	option
className			undefined

注：支持 input 标签原生属性

Textarea

propName	required	type	default	option
className			undefined

注：支持 textarea 标签原生属性

View

propName	required	type	default	option
className			undefined

注：支持 div 标签原生属性

Scorllbar

propName	type	default	desc
className	object	undefined
width	string	'100%'
height	string	'100%'
onScroll	func	() => {}	天然滚动事件调用
onScrollFrame	func	() => {}	动画帧内运行。通行证关于当前的滚动位置的一些方便的值
onScrollStop	func	() => {}	当滚动停止时调用
onScrollStart	func	() => {}	滚动开始时调用
onUpdate	func	() => {}	在组件更新时调用。在动画帧内运行