Browse Source

docs: tab code format

richard1015 4 years ago
parent
commit
743adb0efd
1 changed files with 103 additions and 103 deletions
  1. 103 103
      src/packages/__VUE/tab/doc.md

+ 103 - 103
src/packages/__VUE/tab/doc.md

@@ -24,18 +24,18 @@ app.use(SwiperItem);
 
 ```html
 <nut-tab>
-  <nut-tab-panel tab-title="全部"
-    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="全部">
+    <p class="content-tab">这里是页签全部内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -46,18 +46,18 @@ switchTab 监听切换 tab 返回事件
 
 ```html
 <nut-tab :defaultIndex="1" @switchTab="switchTab">
-  <nut-tab-panel tab-title="全部"
-    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="全部">
+    <p class="content-tab">这里是页签全部内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
 </nut-tab>
 <script lang="ts">
   export default {
@@ -77,18 +77,18 @@ switchTab 监听切换 tab 返回事件
 
 ```html
 <nut-tab :animatedTime="500">
-  <nut-tab-panel tab-title="全部"
-    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="全部">
+    <p class="content-tab">这里是页签全部内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -96,18 +96,18 @@ switchTab 监听切换 tab 返回事件
 
 ```html
 <nut-tab :no-swiping="true">
-  <nut-tab-panel tab-title="全部"
-    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="全部">
+    <p class="content-tab">这里是页签全部内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -117,24 +117,24 @@ switchTab 监听切换 tab 返回事件
 
 ```html
 <nut-tab :animatedTime="500" scrollType="scroll">
-  <nut-tab-panel tab-title="全部"
-    ><p class="content-tab">这里是页签全部内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已取消"
-    ><p class="content-tab">这里是页签已取消内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待评价"
-    ><p class="content-tab">这里是页签待评价内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="全部">
+    <p class="content-tab">这里是页签全部内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已取消">
+    <p class="content-tab">这里是页签已取消内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待评价">
+    <p class="content-tab">这里是页签待评价内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -146,21 +146,21 @@ switchTab 监听切换 tab 返回事件
     <template v-slot:header><nut-icon name="dongdong"></nut-icon></template>
     <p class="content-tab">这里是页签全部内容</p>
   </nut-tab-panel>
-  <nut-tab-panel tab-title="待付款"
-    ><p class="content-tab">这里是页签待付款内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待收获"
-    ><p class="content-tab">这里是页签待收获内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已完成"
-    ><p class="content-tab">这里是页签已完成内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="已取消"
-    ><p class="content-tab">这里是页签已取消内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="待评价"
-    ><p class="content-tab">这里是页签待评价内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="待付款">
+    <p class="content-tab">这里是页签待付款内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待收获">
+    <p class="content-tab">这里是页签待收获内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已完成">
+    <p class="content-tab">这里是页签已完成内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="已取消">
+    <p class="content-tab">这里是页签已取消内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="待评价">
+    <p class="content-tab">这里是页签待评价内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -174,27 +174,27 @@ switchTab 监听切换 tab 返回事件
   scrollType="scroll"
   icon-type="half"
 >
-  <nut-tab-panel tab-title="页签一"
-    ><p class="content-tab">这里是页签一内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签二"
-    ><p class="content-tab">这里是页签二内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签三"
-    ><p class="content-tab">这里是页签三内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签四"
-    ><p class="content-tab">这里是页签四内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签五"
-    ><p class="content-tab">这里是页签五内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签六"
-    ><p class="content-tab">这里是页签六内容</p></nut-tab-panel
-  >
-  <nut-tab-panel tab-title="页签七"
-    ><p class="content-tab">这里是页签七内容</p></nut-tab-panel
-  >
+  <nut-tab-panel tab-title="页签一">
+    <p class="content-tab">这里是页签一内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签二">
+    <p class="content-tab">这里是页签二内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签三">
+    <p class="content-tab">这里是页签三内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签四">
+    <p class="content-tab">这里是页签四内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签五">
+    <p class="content-tab">这里是页签五内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签六">
+    <p class="content-tab">这里是页签六内容</p>
+  </nut-tab-panel>
+  <nut-tab-panel tab-title="页签七">
+    <p class="content-tab">这里是页签七内容</p>
+  </nut-tab-panel>
 </nut-tab>
 ```
 
@@ -246,7 +246,7 @@ export default {
 | default-index | 默认选中的页签栏                                                                                            | Number  | 0          |
 | animated-time | 开启切换标签内容时的转场动画时间                                                                            | Number  | 0          |
 | no-swiping    | 禁止 tab 内容滑动                                                                                           | Boolean | false      |
-| scrollType    | 页签栏的分布,默认平均分布,设置为"scroll",有最小宽度,发生滚动                                            | string  | “default“  |
+| scroll-type    | 页签栏的分布,默认平均分布,设置为"scroll",有最小宽度,发生滚动                                            | string  | “default“  |
 | icon-type     | 页签底部选中的红色样式,当为 half 的时候,显示半圆的红色 icon,默认为 all:红色横线,用来兼容不同的视觉规范 | String  | all        |
 
 ### nut-tab-panel