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

开发指南

1. 修改package.json文件的版本号
2. 打包到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 |required|type |default |option| |:---------:|:------:|:----:|:-------:|------| |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 |required|type |default |desc | |:-----------:|:------:|:----:|:-------:|--------------| |className | |object|undefined| | |width | |string|'100%' | | |height | |string|'100%' | | |onScroll | |func |() => {} |天然滚动事件调用| |onScrollFrame| |func |() => {} |动画帧内运行。通行证关于当前的滚动位置的一些方便的值| |onScrollStop | |func |() => {} |当滚动停止时调用| |onScrollStart| |func |() => {} |滚动开始时调用 | |onUpdate | |func |() => {} |在组件更新时调用。在动画帧内运行|