bs-ui-tabs

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

功能介绍

• line, card, card-border, tag, custom四种样式切换
• 标签超过四个时支持scroll

使用方法

1. 安装

npm i bs-ui-tabs

2. .json

"usingComponents": {
    "bs-tabs": "miniprogram_npm/bs-ui-tabs/index",
    "bs-tab": "miniprogram_npm/bs-ui-tabs/tab/index"
  }

3. .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;
}