Bs-ui-tabs NPM

bs-ui-tabs

这个项目是从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;
}

@infinitebrahmanuniverse/nolb-bs-@everything-registry/sub-chunk-1268 @zalastax/nolb-bs-

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago