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

fix #1313

example/pages/tab/index.wxml

@@ -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 }}"
     >

example/pages/tab/index.wxss

@@ -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;
+}

packages/tab/README.md

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

packages/tabs/index.less

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

packages/tabs/index.ts

@@ -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',

packages/tabs/index.wxml

@@ -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"
         >