@zhike/ti-ui

common UI components for Zhike-tiku

Usage no npm install needed!

<script type="module">
  import zhikeTiUi from 'https://cdn.skypack.dev/@zhike/ti-ui';
</script>

README

ti-UI

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

demo

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

使用指南

安装

npm install --save @zhike/ti-ui

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

npm install --save react
npm install --save aphrodite

如果需要使用 Scrollbar的话

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 () => {} 在组件更新时调用。在动画帧内运行