docs(tag): update code sample

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

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);
+    },
+  },
+});

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

src/tag/_example/checkable/index.wxml

@@ -0,0 +1,13 @@
+<view class="group margin">
+  <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
+  >
+</view>

src/tag/_example/checkable/index.wxss

@@ -0,0 +1,14 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.margin {
+  margin: 16rpx 0;
+}
+
+.margin-right {
+  margin-right: 32rpx;
+}

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,
+      });
+    },
+  },
+});

src/tag/_example/closable/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}

src/tag/_example/closable/index.wxml

@@ -0,0 +1,4 @@
+<view class="group margin">
+  <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>
+</view>

src/tag/_example/closable/index.wxss

@@ -0,0 +1,14 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.margin {
+  margin: 16rpx 0;
+}
+
+.margin-right {
+  margin-right: 32rpx;
+}

src/tag/_example/ellipsis/index.js

@@ -0,0 +1 @@
+Component({});

src/tag/_example/ellipsis/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}

src/tag/_example/ellipsis/index.wxml

@@ -0,0 +1,3 @@
+<view class="group margin">
+  <t-tag max-width="{{130}}" title="超长省略文本标签超长省略文本标签">超长省略文本标签超长省略文本标签</t-tag>
+</view>

src/tag/_example/ellipsis/index.wxss

@@ -0,0 +1,10 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.margin {
+  margin: 16rpx 0;
+}

src/tag/_example/iconDemo/index.js

@@ -0,0 +1 @@
+Component({});

src/tag/_example/iconDemo/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}

src/tag/_example/iconDemo/index.wxml

@@ -0,0 +1,6 @@
+<view class="group margin">
+  <t-tag theme="primary">
+    标签
+    <t-icon name="app" size="14px" slot="icon" />
+  </t-tag>
+</view>

src/tag/_example/iconDemo/index.wxss

@@ -0,0 +1,14 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.margin {
+  margin: 16rpx 0;
+}
+
+.margin-right {
+  margin-right: 32rpx;
+}

src/tag/_example/shape/index.js

@@ -0,0 +1 @@
+Component({});

src/tag/_example/shape/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tag": "tdesign-miniprogram/tag/tag"
+  }
+}

src/tag/_example/shape/index.wxml

@@ -0,0 +1,4 @@
+<view class="group margin">
+  <t-tag class="margin-right" theme="primary" shape="round">圆弧</t-tag>
+  <t-tag theme="primary" shape="mark">半圆弧</t-tag>
+</view>

src/tag/_example/shape/index.wxss

@@ -0,0 +1,14 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.margin {
+  margin: 16rpx 0;
+}
+
+.margin-right {
+  margin-right: 32rpx;
+}

src/tag/_example/size/index.js

@@ -0,0 +1 @@
+Component({});

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

src/tag/_example/size/index.wxml

@@ -0,0 +1,8 @@
+<view class="group padding-bottom d-flex">
+  <t-tag class="margin-right" size="large" theme="primary">展示标签30</t-tag>
+  <t-tag size="medium" theme="primary">展示标签24</t-tag>
+</view>
+<view class="group d-flex">
+  <t-check-tag class="margin-right" size="large">点击标签30</t-check-tag>
+  <t-check-tag size="medium">点击标签24</t-check-tag>
+</view>

src/tag/_example/size/index.wxss

@@ -0,0 +1,19 @@
+.group {
+  padding: 32rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.d-flex {
+  display: flex;
+  align-items: flex-start;
+}
+
+.padding-bottom {
+  padding: 32rpx 32rpx 0;
+}
+
+.margin-right {
+  margin-right: 32rpx;
+}

src/tag/_example/tag.json

@@ -1,3 +1,12 @@
 {
-  "navigationBarTitleText": "Tag"
+  "navigationBarTitleText": "Tag",
+  "usingComponents": {
+    "theme": "./theme",
+    "ellipsis": "./ellipsis",
+    "size": "./size",
+    "iconDemo": "./iconDemo",
+    "shape": "./shape",
+    "closable": "./closable",
+    "checkable": "./checkable"
+  }
 }

src/tag/_example/tag.less

@@ -1,23 +0,0 @@
-.group {
-  padding: 32rpx;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-
-  &.d-flex {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &.padding-bottom {
-    padding: 32rpx 32rpx 0;
-  }
-
-  &.margin {
-    margin: 16rpx 0;
-  }
-
-  .t-tag {
-    margin-right: 32rpx;
-  }
-}

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({});