Merge pull request #675 from CodingOnStar/Docs/cell

docs(cell): replace the demo code of cell
Tencent · Jul 29, 2022 · e726e33 · e726e33
2 parents 4788312 + 0aeac62
commit e726e33
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 93 deletions.
diff --git a/src/cell/README.md b/src/cell/README.md
@@ -21,64 +21,13 @@ isComponent: true
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/cell-1.png" width="375px" height="50%">
 
-```html
-<!-- 单行 默认 -->
-<t-cell title="单行标题" hover />
-
-<!-- 单行 必须 -->
-<t-cell title="单行标题" required />
-
-<!-- 单行 辅助信息 -->
-<t-cell title="单行标题" hover note="辅助信息" />
-
-<!-- 单行 箭头 -->
-<t-cell title="单行标题" hover arrow />
-
-<!-- 单行 自定义辅助信息-slot -->
-<t-cell title="单行标题" hover arrow>
-  <t-badge count="{{16}}" slot="note" />
-</t-cell>
-
-<!-- 单行 左侧icon-slot -->
-<t-cell title="单行标题" hover>
-  <t-icon name="app" slot="left-icon" />
-</t-cell>
-```
+{{ base }}
 
 ### 多行单元格
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/cell-2.png" width="375px" height="50%">
 
-```html
-<!-- 多行 -->
-<t-cell title="多行标题" description="一段很长很长的内容文字" />
-
-<!-- 多行 带图标 -->
-<t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
-  <t-icon class="icon-center title-icon" name="app" slot="left-icon" />
-</t-cell>
-
-<!-- 多行 带头像 -->
-<t-cell
-  title="多行带头像"
-  arrow
-  description="一段很长很长很长的内容文字"
-  t-class-image="title-image"
->
-  <view class="avatar" slot="left-icon">
-    <open-data type="userAvatarUrl" />
-  </view>
-</t-cell>
-
-<!-- 多行 带图片 -->
-<t-cell
-  title="多行带图片"
-  description="一段很长很长的内容文字"
-  align="top"
-  t-class-image="title-image-large"
-  image="xxx.svg"
-/>
-```
+{{ multiple }}
 
 ## API
 ### Cell Props

diff --git a/src/cell/_example/base/index.js b/src/cell/_example/base/index.js
@@ -0,0 +1,3 @@
+Page({
+  data: {},
+});
diff --git a/src/cell/_example/base/index.json b/src/cell/_example/base/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-switch": "tdesign-miniprogram/switch/switch",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-badge": "tdesign-miniprogram/badge/badge"
+  }
+}
diff --git a/src/cell/_example/base/index.wxml b/src/cell/_example/base/index.wxml
@@ -0,0 +1,16 @@
+<view class="demo-section__wrapper">
+  <t-cell title="单行标题" hover />
+  <t-cell title="单行标题" required />
+  <t-cell title="单行标题" hover note="辅助信息" />
+  <t-cell title="单行标题" hover arrow />
+  <t-cell title="单行标题" hover note="辅助信息" arrow />
+  <t-cell title="单行标题" hover arrow>
+    <t-badge count="{{16}}" slot="note" />
+  </t-cell>
+  <t-cell title="单行标题">
+    <t-switch defaultValue="{{false}}" slot="note" />
+  </t-cell>
+  <t-cell title="单行标题" hover>
+    <t-icon name="app" slot="left-icon" />
+  </t-cell>
+</view>
diff --git a/src/cell/_example/base/index.wxss b/src/cell/_example/base/index.wxss
@@ -0,0 +1,3 @@
+.demo-section__wrapper {
+  margin: 32rpx 0;
+}
diff --git a/src/cell/_example/cell.json b/src/cell/_example/cell.json
@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "cell 单元格",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "multiple": "./multiple"
   }
 }
diff --git a/src/cell/_example/cell.wxml b/src/cell/_example/cell.wxml
@@ -3,46 +3,9 @@
   <view class="demo-desc">用于各个类别行的信息展示。</view>
   <t-demo title="01 类型">
     <view class="demo-section__desc">单行</view>
-    <view class="demo-section__wrapper">
-      <t-cell title="单行标题" hover />
-      <t-cell title="单行标题" required />
-      <t-cell title="单行标题" hover note="辅助信息" />
-      <t-cell title="单行标题" hover arrow />
-      <t-cell title="单行标题" hover note="辅助信息" arrow />
-      <t-cell title="单行标题" hover arrow>
-        <t-badge count="{{16}}" slot="note" />
-      </t-cell>
-      <t-cell title="单行标题">
-        <t-switch defaultValue="{{false}}" slot="note" />
-      </t-cell>
-      <t-cell title="单行标题" hover>
-        <t-icon name="app" slot="left-icon" />
-      </t-cell>
-    </view>
+    <base />
 
     <view class="demo-section__desc">多行</view>
-    <view class="demo-section__wrapper">
-      <t-cell title="多行标题" description="一段很长很长的内容文字" />
-      <t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
-        <t-icon name="app" slot="left-icon" />
-      </t-cell>
-      <t-cell title="多行带头像" arrow description="一段很长很长很长的内容文字">
-        <view class="avatar" slot="left-icon">
-          <open-data type="userAvatarUrl" />
-        </view>
-      </t-cell>
-      <t-cell
-        title="多行带图片"
-        description="一段很长很长的内容文字"
-        align="top"
-        image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
-      />
-      <t-cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
-      <t-cell
-        title="多行标题，高度不定，长文本自动换行，该选项的描述是一段很长的内容"
-        description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
-        bordered="{{false}}"
-      />
-    </view>
+    <multiple />
   </t-demo>
 </view>
diff --git a/src/cell/_example/multiple/index.js b/src/cell/_example/multiple/index.js
@@ -0,0 +1,3 @@
+Page({
+  data: {},
+});
diff --git a/src/cell/_example/multiple/index.json b/src/cell/_example/multiple/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell": "tdesign-miniprogram/cell/cell"
+  }
+}
diff --git a/src/cell/_example/multiple/index.wxml b/src/cell/_example/multiple/index.wxml
@@ -0,0 +1,18 @@
+<view class="demo-section__wrapper">
+  <t-cell title="多行标题" description="一段很长很长的内容文字" />
+  <t-cell title="多行带图标" description="说明文字" note="辅助信息" arrow t-class-left="t-class-left">
+    <t-icon name="app" slot="left-icon" />
+  </t-cell>
+  <t-cell title="多行带头像" arrow description="一段很长很长很长的内容文字">
+    <view class="avatar" slot="left-icon">
+      <open-data type="userAvatarUrl" />
+    </view>
+  </t-cell>
+  <t-cell title="多行带图片" description="一段很长很长的内容文字" align="top" image="xxx.svg" />
+  <t-cell title="多行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
+  <t-cell
+    title="多行标题，高度不定，长文本自动换行，该选项的描述是一段很长的内容"
+    description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
+    bordered="{{false}}"
+  />
+</view>
diff --git a/src/cell/_example/multiple/index.wxss b/src/cell/_example/multiple/index.wxss
@@ -0,0 +1,14 @@
+.demo-section__wrapper {
+  margin: 32rpx 0;
+}
+
+.t-class-left {
+  align-self: flex-start;
+}
+
+.avatar {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  overflow: hidden;
+}