请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

react-component/m-picker: React Mobile Picker(web & react-native)

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

react-component/m-picker

开源软件地址(OpenSource Url):

https://github.com/react-component/m-picker

开源编程语言(OpenSource Language):

TypeScript 86.4%

开源软件介绍(OpenSource Introduction):

rmc-picker


React Mobile Picker Component (web and react-native)

NPM version react-native react build status Test coverage gemnasium deps npm download

Screenshots

Development

npm i
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-picker/

react-native

npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios

install

rmc-picker

4.x beta docs

If you are looking for 3.x doc, please see [email protected]

Usage

<MultiPicker
  selectedValue={this.state.value}
  onValueChange={this.onChange}
>
  <Picker indicatorClassName="my-picker-indicator">
    <Picker.Item className="my-picker-view-item" value="1">one</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="2">two</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="3">three</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="4">four</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="5">five</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="6">six</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="7">seven</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="8">eight</Picker.Item>
  </Picker>
  <Picker indicatorClassName="my-picker-indicator">
    <Picker.Item className="my-picker-view-item" value="11">eleven</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="12">twelve</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="13">thirteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="14">fourteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="15">fifteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="16">sixteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="17">seventeen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="18">eighteen</Picker.Item>
  </Picker>
</MultiPicker>

API

MultiPicker props

name description type default
className(web) additional css class of root dom node String
prefixCls(web) prefix class String ''
defaultSelectedValue(web) default selected values string[]/number[]
selectedValue current selected values string[]/number[]
onValueChange fire when picker change Function(value)

Picker props

name description type default
className(web) additional css class of root dom node String
prefixCls(web) prefix class String ''
defaultSelectedValue(web) default selected values string/number
selectedValue current selected values string/number
onValueChange fire when picker change Function(value)
disabled whether picker is disabled bool false
indicatorClassName className of indicator String
indicatorStyle style of indicator object

Picker.Item props

name description type default
className(web) additional css class of root dom node String
value value of item String

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-picker is released under the MIT license.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap