0.2.8 • Published 6 years ago
bs-ui-tabs
Base Readme
这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.
功能介绍
line, card, card-border, tag, custom四种样式切换- 标签超过四个时支持scroll
使用方法
- 安装
npm i bs-ui-tabs
- .json
"usingComponents": {
"bs-tabs": "miniprogram_npm/bs-ui-tabs/index",
"bs-tab": "miniprogram_npm/bs-ui-tabs/tab/index"
}
- .wxml
<bs-tabs active="{{ 1 }}" type="line" color="red" nav-border="topBottom" line-width="30rpx">
<bs-tab title="tab1" key="key1">content1</bs-tab>
<bs-tab title="tab2" key="key2">content2</bs-tab>
</bs-tabs>
接口说明
Properties
| Property | Type | Required | Default Value | Comments |
|---|
| type | String | optional | line | tab样式，line, card, card-border, tag, custom(自定义样式) |
| color | String | optional | '#666' | 字体颜色，itemBackground为空时取此值 |
| active | Number | String | optional | 0 | 默认选中tab下标从0开始,可以接受string |
| navHeight | Number | optional | 60 | tab-nav高度 单位 rpx |
| navWidth | String | optional | null | tab-nav宽度 单位rpx |
| navPadding | String | optional | '' | tab-nav padding 单位rpx eg: 0 30rpx |
| fontSize | Number | optional | 28 | 字体大小 |
| lineWidth | String | optional | '0rpx' | type 为 line时的border-bottom宽度 单位rpx, 为auto时自动宽度 |
| lineHeight | Number | optional | '4' | type 为 line时选中的短线高度 |
| lineColor | String | optional | null | line color |
| itemHeight | Number | optional | null | tab的高度, 为null 单位rpx |
| itemColor | String | optional | '#333' | tab的未选中时颜色，默认为: #333 |
| itemPadding | String | optional | '0 30rpx' | item padding 单位rpx |
| itemBackground | String | optional | '' | 为空时取color的值 |
| navBorder | String | optional | 'none' | 值为none,topBottom, bottom |
| borderRadius | Number | optional | 10 | type 为 card, card-border时可用 单位rpx |
| swipeable | Boolean | optional | false | 是否启用滑动切换tab |
| swipeThreshold | Number | optional | 4 | tab数量超出多少时启用滑动 |
Events
| Event | Comments |
|---|
| click | 点击tab时的回调 |
| change | tab切换时的回调 |
| disabled | 点击了disabled tab的回调 |
自定义样式
| Class Name | Comments |
|---|
| cm-tabs | 自定义tabs的样式, 导航栏 |
| cm-tab-active | 自定义tab选中的样式 |
| cm-tab-line-active | 自定义tab选中的line样式, type 为line时可用 |
| cm-tab | 自定义普通的tab样式 |
| cm-content | 自定义content的样式 |
自定义样式参考
/* start line */
.cm-tabs-line {
border-top: 2rpx solid #eee;
border-bottom: 2rpx solid #eee;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
color: #666;
}
.cm-tab-line {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.cm-tab-line-active{
background-color: red ;
height: 6rpx;
width: 30rpx;
position: absolute;
bottom: 0;
}
.cm-tab-active-line{
color: red;
font-weight: 500;
}
/* end line */
/* start card */
.cm-tabs-card{
margin: 0 40rpx;
border-radius: 6rpx;
color: #666;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
}
.cm-tab-card {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid blueviolet
}
.cm-tab-active-card{
color: white;
background-color: blueviolet;
}
/*end card */
/*start border*/
.cm-tabs-border {
margin: 0 40rpx;
color: #666;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
}
.cm-tab-border {
flex: 1;
border-color: #999;
border: 2rpx solid #999;
display: flex;
justify-content: center;
align-items: center;
}
.cm-tab-active-border{
color: red;
border-color: red;
}
/* end border */
/* start label */
.cm-tabs-label {
height: 80rpx;
border-top: 2rpx solid #eee;
border-bottom: 2rpx solid #eee;
display: flex;
justify-content: center;
align-items: center;
padding-left:15px;
font-size:28rpx;
}
.cm-tab-active-label{
color: white;
background-color: greenyellow;
border-radius: 20rpx;
}
.cm-tab-label{
padding: 0 15px;
text-align: center;
}
/* end label */
.content {
font-size: 26rpx;
padding: 8rpx 15rpx;
}
.cm-content {
padding: 30rpx 50rpx;
font-size: 28rpx;
}