Merge pull request #622 from Tencent/docs/tag

docs(tag): update code sample
Tencent · Jul 18, 2022 · 2553597 · 2553597
2 parents e7ba8e9 + 9894a39
commit 2553597
Show file tree

Hide file tree

Showing 33 changed files with 166 additions and 107 deletions.
diff --git a/example/app.json b/example/app.json
@@ -86,10 +86,8 @@
     "t-overlay": "tdesign-miniprogram/overlay/overlay",
     "t-stepper": "tdesign-miniprogram/stepper/stepper",
     "t-slider": "tdesign-miniprogram/slider/slider",
-    "t-tag": "tdesign-miniprogram/tag/tag",
     "t-radio": "tdesign-miniprogram/radio/radio",
     "t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
-    "t-check-tag": "tdesign-miniprogram/tag/check-tag",
     "t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
     "t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group",
     "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell",

diff --git a/src/tag/README.md b/src/tag/README.md
@@ -18,38 +18,37 @@ isComponent: true
 
 ## 代码演示
 
-### 基础标签
+### 类型
+#### 展示型标签
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/tags-1.png" width="375px" height="50%">
+{{ theme }}
 
-```html
-<!-- theme 样式 -->
-<t-tag theme="primary">重要</t-tag>
+#### 带图标标签
 
-<!-- variant 背景 -->
-<t-tag theme="primary" variant="plain">镂空标签</t-tag>
+{{ iconDemo }}
 
-<!-- shape 圆角 -->
-<t-tag theme="primary" shape="circle">圆角标签</t-tag>
+#### 圆角标签
 
-<!-- closable 带关闭 -->
-<t-tag closable theme="primary">标签</t-tag>
+{{ shape }}
 
-<!-- 超长省略 -->
-<t-tag max-width="150" title="超长省略文本标签超长省略文本标签"
-  >超长省略文本标签超长省略文本标签</t-tag
->
-```
+#### 可关闭标签
 
-### 可点击的标签
+{{ closable }}
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/tags-2.png" width="375px" height="50%">
+#### 超长省略文本标签
 
-```html
-<t-check-tag checked="{{true}}" size="large">已点击</t-check-tag>
-<t-check-tag checked="{{false}}" size="large">未点击</t-check-tag>
-<t-check-tag checked="{{false}}" disabled="{{true}}" size="large">不可点击</t-check-tag>
-```
+{{ ellipsis }}
+
+
+## 状态
+
+#### 标签状态
+
+{{ checkable }}
+
+#### 标签规格
+
+{{ size }}
 
 ## API
 ### Tag Props

diff --git a/src/tag/_example/checkable/index.js b/src/tag/_example/checkable/index.js
@@ -0,0 +1,25 @@
+Component({
+  data: {
+    items: [
+      {
+        name: '选中',
+        checked: true,
+      },
+      {
+        name: '未选中',
+        checked: false,
+      },
+      {
+        name: '不可选',
+        checked: false,
+        disabled: true,
+      },
+    ],
+  },
+
+  methods: {
+    handleCheckTagChange(e) {
+      console.log(e.detail.checked);
+    },
+  },
+});
diff --git a/src/tag/_example/checkable/index.json b/src/tag/_example/checkable/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag",
+    "t-check-tag": "tdesign-miniprogram/tag/check-tag"
+  }
+}
diff --git a/src/tag/_example/checkable/index.wxml b/src/tag/_example/checkable/index.wxml
@@ -0,0 +1,11 @@
+<t-check-tag
+  class="margin-right"
+  wx:for="{{items}}"
+  wx:for-index="index"
+  wx:key="index"
+  checked="{{item.checked}}"
+  disabled="{{item.disabled}}"
+  data-index="{{index}}"
+  bind:change="handleCheckTagChange"
+  >{{item.name}}</t-check-tag
+>
diff --git a/src/tag/_example/checkable/index.wxss b/src/tag/_example/checkable/index.wxss
diff --git a/src/tag/_example/closable/index.js b/src/tag/_example/closable/index.js
@@ -0,0 +1,18 @@
+Component({
+  data: {
+    show: [true, true],
+  },
+
+  methods: {
+    handleClose0() {
+      this.setData({
+        [`show[0]`]: false,
+      });
+    },
+    handleClose1() {
+      this.setData({
+        [`show[1]`]: false,
+      });
+    },
+  },
+});
diff --git a/src/tag/_example/closable/index.json b/src/tag/_example/closable/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}
diff --git a/src/tag/_example/closable/index.wxml b/src/tag/_example/closable/index.wxml
@@ -0,0 +1,2 @@
+<t-tag class="margin-right" wx:if="{{show[0]}}" bind:close="handleClose0" closable theme="primary">标签</t-tag>
+<t-tag wx:if="{{show[1]}}" icon="app" bind:close="handleClose1" closable theme="primary">标签</t-tag>
diff --git a/src/tag/_example/closable/index.wxss b/src/tag/_example/closable/index.wxss
diff --git a/src/tag/_example/ellipsis/index.js b/src/tag/_example/ellipsis/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/tag/_example/ellipsis/index.json b/src/tag/_example/ellipsis/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}
diff --git a/src/tag/_example/ellipsis/index.wxml b/src/tag/_example/ellipsis/index.wxml
@@ -0,0 +1 @@
+<t-tag max-width="{{130}}" title="超长省略文本标签超长省略文本标签">超长省略文本标签超长省略文本标签</t-tag>
diff --git a/src/tag/_example/ellipsis/index.wxss b/src/tag/_example/ellipsis/index.wxss
diff --git a/src/tag/_example/iconDemo/index.js b/src/tag/_example/iconDemo/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/tag/_example/iconDemo/index.json b/src/tag/_example/iconDemo/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}
diff --git a/src/tag/_example/iconDemo/index.wxml b/src/tag/_example/iconDemo/index.wxml
@@ -0,0 +1,4 @@
+<t-tag theme="primary">
+  标签
+  <t-icon name="app" size="14px" slot="icon" />
+</t-tag>
diff --git a/src/tag/_example/iconDemo/index.wxss b/src/tag/_example/iconDemo/index.wxss
diff --git a/src/tag/_example/shape/index.js b/src/tag/_example/shape/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/tag/_example/shape/index.json b/src/tag/_example/shape/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}
diff --git a/src/tag/_example/shape/index.wxml b/src/tag/_example/shape/index.wxml
@@ -0,0 +1,2 @@
+<t-tag class="margin-right" theme="primary" shape="round">圆弧</t-tag>
+<t-tag theme="primary" shape="mark">半圆弧</t-tag>
diff --git a/src/tag/_example/shape/index.wxss b/src/tag/_example/shape/index.wxss
diff --git a/src/tag/_example/size/index.js b/src/tag/_example/size/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/tag/_example/size/index.json b/src/tag/_example/size/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag",
+    "t-check-tag": "tdesign-miniprogram/tag/check-tag"
+  }
+}
diff --git a/src/tag/_example/size/index.wxml b/src/tag/_example/size/index.wxml
@@ -0,0 +1,2 @@
+<t-tag class="margin-right" size="large" theme="primary">展示标签30</t-tag>
+<t-tag size="medium" theme="primary">展示标签24</t-tag>
diff --git a/src/tag/_example/size/index.wxss b/src/tag/_example/size/index.wxss
diff --git a/src/tag/_example/tag.json b/src/tag/_example/tag.json
@@ -1,3 +1,14 @@
 {
-  "navigationBarTitleText": "Tag"
+  "navigationBarTitleText": "Tag",
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag",
+    "t-check-tag": "tdesign-miniprogram/tag/check-tag",
+    "theme": "./theme",
+    "ellipsis": "./ellipsis",
+    "size": "./size",
+    "iconDemo": "./iconDemo",
+    "shape": "./shape",
+    "closable": "./closable",
+    "checkable": "./checkable"
+  }
 }
diff --git a/src/tag/_example/tag.ts b/src/tag/_example/tag.ts
@@ -1,33 +1 @@
-Page({
-  data: {
-    show: [true, true],
-    items: [
-      {
-        name: '选中',
-        checked: true,
-      },
-      {
-        name: '未选中',
-        checked: false,
-      },
-      {
-        name: '不可选',
-        checked: false,
-        disabled: true,
-      },
-    ],
-  },
-  handleCheckTagChange(e) {
-    console.log(e.detail.checked);
-  },
-  handleClose0() {
-    this.setData({
-      [`show[0]`]: false,
-    });
-  },
-  handleClose1() {
-    this.setData({
-      [`show[1]`]: false,
-    });
-  },
-});
+Page({});
diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml
@@ -1,71 +1,34 @@
 <view class="demo">
   <view class="demo-title">Tag 标签</view>
   <view class="demo-desc">用于表明主体的类目，属性或状态。</view>
-
   <t-demo title="01 类型" desc="展示型标签">
+    <theme class="group margin" />
     <view class="group margin">
-      <t-tag theme="primary">默认</t-tag>
-      <t-tag theme="success">成功</t-tag>
-      <t-tag theme="warning">警告</t-tag>
-      <t-tag theme="danger">危险</t-tag>
-      <t-tag>信息</t-tag>
-    </view>
-
-    <view class="group margin">
-      <t-tag theme="primary">深色</t-tag>
-      <t-tag theme="primary" variant="light">浅色</t-tag>
-      <t-tag theme="primary" variant="outline">描边</t-tag>
+      <t-tag class="margin-right" theme="primary">深色</t-tag>
+      <t-tag class="margin-right" theme="primary" variant="light">浅色</t-tag>
+      <t-tag class="margin-right" theme="primary" variant="outline">描边</t-tag>
       <t-tag theme="primary" variant="light-outline">描边浅色</t-tag>
     </view>
   </t-demo>
   <t-demo title="" desc="带图标标签">
-    <view class="group margin">
-      <t-tag theme="primary">
-        标签
-        <t-icon name="app" size="14px" slot="icon" />
-      </t-tag>
-    </view>
+    <iconDemo class="group margin" />
   </t-demo>
   <t-demo title="" desc="圆角标签">
-    <view class="group margin">
-      <t-tag theme="primary" shape="round">圆弧</t-tag>
-      <t-tag theme="primary" shape="mark">半圆弧</t-tag>
-    </view>
+    <shape class="group margin" />
   </t-demo>
   <t-demo title="" desc="可关闭标签">
-    <view class="group margin">
-      <t-tag wx:if="{{show[0]}}" bind:close="handleClose0" closable theme="primary">标签</t-tag>
-      <t-tag wx:if="{{show[1]}}" icon="app" bind:close="handleClose1" closable theme="primary">标签</t-tag>
-    </view>
+    <closable class="group margin" />
   </t-demo>
   <t-demo title="" desc="超长省略文本标签">
-    <view class="group margin">
-      <t-tag max-width="{{130}}" title="超长省略文本标签超长省略文本标签">超长省略文本标签超长省略文本标签</t-tag>
-    </view>
+    <ellipsis class="group margin" />
   </t-demo>
-
   <t-demo title="02 状态" desc="标签状态">
-    <view class="group margin">
-      <t-check-tag
-        wx:for="{{items}}"
-        wx:for-index="index"
-        wx:key="index"
-        checked="{{item.checked}}"
-        disabled="{{item.disabled}}"
-        data-index="{{index}}"
-        bind:change="handleCheckTagChange"
-        >{{item.name}}</t-check-tag
-      >
-    </view>
+    <checkable class="group margin" />
   </t-demo>
-
   <t-demo title="03 规格" desc="标签规格">
-    <view class="group padding-bottom d-flex">
-      <t-tag size="large" theme="primary">展示标签30</t-tag>
-      <t-tag size="medium" theme="primary">展示标签24</t-tag>
-    </view>
+    <size class="group padding-bottom d-flex" />
     <view class="group d-flex">
-      <t-check-tag size="large">点击标签30</t-check-tag>
+      <t-check-tag class="margin-right" size="large">点击标签30</t-check-tag>
       <t-check-tag size="medium">点击标签24</t-check-tag>
     </view>
   </t-demo>

diff --git a/src/tag/_example/theme/index.js b/src/tag/_example/theme/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/tag/_example/theme/index.json b/src/tag/_example/theme/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}
diff --git a/src/tag/_example/theme/index.wxml b/src/tag/_example/theme/index.wxml
@@ -0,0 +1,5 @@
+<t-tag class="margin-right" theme="primary">默认</t-tag>
+<t-tag class="margin-right" theme="success">成功</t-tag>
+<t-tag class="margin-right" theme="warning">警告</t-tag>
+<t-tag class="margin-right" theme="danger">危险</t-tag>
+<t-tag>信息</t-tag>
diff --git a/src/tag/_example/theme/index.wxss b/src/tag/_example/theme/index.wxss