link-ui-cyf
v1.0.2
Published
```tsx <div className='app' > <Navs navList={navList} onAction={this.onAction} color='#fff' backgroundColor='MediumBlue' fontSize='16px' action={true}>
Downloads
4
Readme
一、导航栏:Navs要配合Tab一起使用
<div className='app' >
<Navs
navList={navList}
onAction={this.onAction}
color='#fff'
backgroundColor='MediumBlue'
fontSize='16px'
action={true}>
<Tab name={0}>
<div>首页</div>
</Tab>
<Tab name={1}>
<div>我的</div>
</Tab>
</Navs>
</div>
- navList:接收的导航栏的参数格式为[{title:'xxx',id:0}],注:最少有2个
- color:导航栏的字体颜色,默认为#fff
- backgroundColor:导航栏的背景颜色,默认为#000
- fontSize:导航栏的字体大小,默认为16px
- action:导航栏的样式,默认为fasle
- onAction:点击导航栏发生的方法,拿到的参数为导航栏所对应的id
- fixed:固定定位,参数为布尔值默认为fasle
二、Tab导航栏显示的界面插槽!注:须搭配Navs使用
<Navs
navList={navList}
onAction={this.onAction}
color='#fff'
backgroundColor='MediumBlue'
fontSize='16px'
action={true}>
<Tab name={0}>
<div>首页</div>
</Tab>
<Tab name={1}>
<div>我的</div>
</Tab>
</Navs>
- name:参数为navList里面所对应的id
- 里面直接写样式就好了
三、LiveButton:按钮
<LiveButton onClick={this.a} >确定</LiveButton>
- onClick:点击事件
- color:背景颜色,默认为#409eff
- width:按钮的width
- height:按钮的height
- circle:是否是圆角,默认为fasle
五、LinkIput:input
<LinkIput label='账号' value='222' type='text' placeholder='请输入账号' onChange={this.OnInput}></LinkIput>
- label:提示
- value:input值
- type:表单类型(目前其他没有适配只有text)
- placeholder:提示
- onChange:input值改变后的方法
四、LinkBacktop:返回顶部
<LinkBacktop color='red' fontSize='30px' backgroundColor='pink' scrollY={100}>返回顶部</LinkBacktop>
- scrollY:下滑多少的时候显示默认为一直显示参数为number类型
- color:字体颜色
- fontSize:字体大小
- borderColor:边框颜色
- width:宽
- height:高
- backgroundColor:背景色