blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Tab: add new external class nav-class、tab-class、tab-active-class

Browse Source 
fix #1313
This commit is contained in:
rex 2019-03-08 12:00:53 +08:00 committed by GitHub
parent 94e06e50f4
commit da04fb0c1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/pages/tab/index.wxml
View File

@ -13,7 +13,7 @@
</demo-block>
<demo-block title="自定义标题">
<van-tabs active="{{ 1 }}" bind:change="onChange">
<van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="tab-class" tab-active-class="tab-active-class">
<van-icon
slot="nav-right"
name="search"
@ -24,7 +24,6 @@
wx:for="1234"
wx:key="index"
title="{{ '标签' + item }}"
title-style="font-size: 16px; font-weight: bold; {{ index === 0 ? 'text-decoration: line-through;' : '' }}"
dot="{{ index === 1 }}"
info="{{ index === 2 ? 99 : null }}"
>

9
example/pages/tab/index.wxss
View File

@ -11,3 +11,12 @@
padding: 0 10px;
line-height: 44px !important;
}
.tab-class {
transition: all 0.25s ease-in-out;
}
.tab-active-class {
font-size: 1.05em !important;
color: #1989fa !important;
}

3
packages/tab/README.md
View File

@ -203,3 +203,6 @@ Page({
| 类名 | 说明 |
|-----------|-----------|
| custom-class | 根节点样式类 |
| nav-class | 标签栏样式类 |
| tab-class | 标签样式类 |
| tab-active-class | 标签激活态样式类 |

1
packages/tabs/index.less
View File

@ -110,7 +110,6 @@
color: @gray-darker;
text-align: center;
cursor: pointer;
background-color: @white;
box-sizing: border-box;
flex: 1;

2
packages/tabs/index.ts
View File

@ -13,6 +13,8 @@ type Position = 'top' | 'bottom' | '';
VantComponent({
mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
relation: {
name: 'tab',
type: 'descendant',

4
packages/tabs/index.wxml
View File

@ -11,13 +11,13 @@
class="van-tabs__scroll--{{ type }}"
style="{{ color ? 'border-color: ' + color : '' }}"
>
<view class="van-tabs__nav van-tabs__nav--{{ type }}">
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
<view
wx:for="{{ tabs }}"
wx:key="index"
data-index="{{ index }}"
class="van-ellipsis {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}"
style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
bind:tap="onTap"
>