Merge pull request #670 from Tencent/docs/stepper

docs(Stepper): update code sample
Tencent · Jul 29, 2022 · 153d88f · 153d88f
2 parents 8d7100f + f070b9f
commit 153d88f
Show file tree

Hide file tree

Showing 29 changed files with 156 additions and 134 deletions.
diff --git a/src/stepper/README.md b/src/stepper/README.md
@@ -17,34 +17,35 @@ isComponent: true
 
 ## 代码演示
 
+<img src="https://tdesign.gtimg.com/miniprogram/readme/stepper.png" width="375px" height="50%">
+
+### 基本步进器
+
+{{ base }}
+
 ### 带单位的步进器
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/stepper.png" width="375px" height="50%">
+{{ step }}
 
-```html
-<t-cell title="标题文字（单位）">
-  <view class="cell-badge-wrap" slot="right-icon">
-    <t-stepper defaultValue="0" step="2" />
-  </view>
-</t-cell>
-```
+### 纯步进器
 
-### 受控用法
+{{ input-width }}
+
+### 步进器状态
+
+#### 禁用
+
+{{ status }}
+
+#### 最小值/最大值
+
+{{ min-max }}
+
+#### 其他
+
+{{ other }}
 
-```html
-<t-stepper value="{{value}}" bind:change="handleChange" />
-```
 
-```js
-Page({
-  data: {
-    value: 0
-  },
-  handleChange(e) {
-    this.setData({ value: e.detail.value })
-  }
-})
-```
 ## API
 ### Stepper Props
 

diff --git a/src/stepper/_example/base/index.js b/src/stepper/_example/base/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/stepper/_example/base/index.json b/src/stepper/_example/base/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/base/index.wxml b/src/stepper/_example/base/index.wxml
@@ -0,0 +1,3 @@
+<t-cell title="标题文字">
+  <t-stepper defaultValue="0" slot="right-icon" />
+</t-cell>
diff --git a/src/stepper/_example/base/index.wxss b/src/stepper/_example/base/index.wxss
diff --git a/src/stepper/_example/input-width/index.js b/src/stepper/_example/input-width/index.js
@@ -0,0 +1,16 @@
+Component({
+  data: {
+    value: 20,
+  },
+
+  methods: {
+    handleChange(e) {
+      const { value } = e.detail;
+
+      console.log(value);
+      this.setData({
+        value,
+      });
+    },
+  },
+});
diff --git a/src/stepper/_example/input-width/index.json b/src/stepper/_example/input-width/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/input-width/index.wxml b/src/stepper/_example/input-width/index.wxml
@@ -0,0 +1,2 @@
+<!-- 受控用法 -->
+<t-stepper value="{{value}}" bind:change="handleChange" theme="grey" inputWidth="{{72}}" />
diff --git a/src/stepper/_example/input-width/index.wxss b/src/stepper/_example/input-width/index.wxss
diff --git a/src/stepper/_example/min-max/index.js b/src/stepper/_example/min-max/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/stepper/_example/min-max/index.json b/src/stepper/_example/min-max/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/min-max/index.wxml b/src/stepper/_example/min-max/index.wxml
@@ -0,0 +1,7 @@
+<t-cell title="最小值 (5)">
+  <t-stepper defaultValue="5" min="5" slot="right-icon" />
+</t-cell>
+<view class="interval" />
+<t-cell title="最大值 (999)">
+  <t-stepper defaultValue="999" max="999" slot="right-icon" />
+</t-cell>
diff --git a/src/stepper/_example/min-max/index.wxss b/src/stepper/_example/min-max/index.wxss
diff --git a/src/stepper/_example/other/index.js b/src/stepper/_example/other/index.js
@@ -0,0 +1,16 @@
+Component({
+  data: {
+    value: 20,
+  },
+
+  methods: {
+    handleChange(e) {
+      const { value } = e.detail;
+
+      console.log(value);
+      this.setData({
+        value,
+      });
+    },
+  },
+});
diff --git a/src/stepper/_example/other/index.json b/src/stepper/_example/other/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/other/index.wxml b/src/stepper/_example/other/index.wxml
@@ -0,0 +1,5 @@
+<view class="pure-stepper-container">
+  <t-stepper disabled value="3" theme="grey" inputWidth="{{72}}" />
+  <t-stepper defaultValue="0" max="99" theme="grey" inputWidth="{{72}}" />
+  <t-stepper defaultValue="100" theme="grey" inputWidth="{{72}}" />
+</view>
diff --git a/src/stepper/_example/other/index.wxss b/src/stepper/_example/other/index.wxss
@@ -0,0 +1,6 @@
+.pure-stepper-container {
+  padding: 24rpx 32rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/stepper/_example/status/index.js b/src/stepper/_example/status/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/stepper/_example/status/index.json b/src/stepper/_example/status/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/status/index.wxml b/src/stepper/_example/status/index.wxml
@@ -0,0 +1,6 @@
+<t-cell title="禁用">
+  <t-stepper disabled="true" slot="right-icon" />
+</t-cell>
+<t-cell title="禁用（单位）">
+  <t-stepper step="2" disabled="true" slot="right-icon" />
+</t-cell>
diff --git a/src/stepper/_example/status/index.wxss b/src/stepper/_example/status/index.wxss
diff --git a/src/stepper/_example/step/index.js b/src/stepper/_example/step/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/stepper/_example/step/index.json b/src/stepper/_example/step/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper"
+  }
+}
diff --git a/src/stepper/_example/step/index.wxml b/src/stepper/_example/step/index.wxml
@@ -0,0 +1,3 @@
+<t-cell title="标题文字（单位）">
+  <t-stepper defaultValue="0" step="2" slot="right-icon" />
+</t-cell>
diff --git a/src/stepper/_example/step/index.wxss b/src/stepper/_example/step/index.wxss
diff --git a/src/stepper/_example/stepper.json b/src/stepper/_example/stepper.json
@@ -1,6 +1,12 @@
 {
   "navigationBarTitleText": "Stepper 步进器",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "step": "./step",
+    "input-width": "./input-width",
+    "other": "./other",
+    "status": "./status",
+    "min-max": "./min-max"
   }
 }
diff --git a/src/stepper/_example/stepper.less b/src/stepper/_example/stepper.less
@@ -1,57 +1,10 @@
-.t-stepper {
-  &-title,
-  &-desc {
-    margin: 0 32rpx;
-  }
-
-  &-title {
-    padding-top: 48rpx;
-    font-size: 40rpx;
-    font-weight: 500;
-    line-height: 56rpx;
-  }
-
-  &-desc {
-    color: rgba(0, 0, 0, 0.4);
-    margin-top: 16rpx;
-    font-size: 26rpx;
-    line-height: 36rpx;
-  }
-}
-
-.t-stepper-wrapper {
-  margin-top: 40rpx;
-  margin-bottom: 8rpx;
-
-  &-title,
-  &-desc {
-    margin: 0 32rpx;
-  }
-
-  &-title {
-    color: rgba(0, 0, 0, 0.9);
-    font-size: 32rpx;
-    font-weight: 500;
-    line-height: 48rpx;
-    margin-bottom: 16rpx;
-  }
-
-  &-desc {
-    margin: 32rpx;
-    color: rgba(0, 0, 0, 0.4);
-    font-size: 26rpx;
-    line-height: 36rpx;
-    white-space: pre-line;
-  }
-}
-
 .pure-stepper-container {
   padding: 24rpx 32rpx;
   background-color: #fff;
   display: flex;
   justify-content: space-between;
 }
 
-.interval {
-  height: 32rpx;
+.t-cell {
+  margin-bottom: 32rpx;
 }
diff --git a/src/stepper/_example/stepper.ts b/src/stepper/_example/stepper.ts
@@ -1,14 +1 @@
-Page({
-  data: {
-    value: 20,
-  },
-
-  handleChange(e) {
-    const { value } = e.detail;
-
-    console.log(value);
-    this.setData({
-      value,
-    });
-  },
-});
+Page({});
diff --git a/src/stepper/_example/stepper.wxml b/src/stepper/_example/stepper.wxml
@@ -1,57 +1,22 @@
-<view class="page">
-  <view class="t-stepper-title">Stepper 步进器</view>
-  <view class="t-stepper-desc">用于数量的增减。</view>
+<view class="demo">
+  <view class="demo-title">Stepper 步进器</view>
+  <view class="demo-desc">用于数量的增减。</view>
   <t-demo title="01 类型" desc="基本步进器">
-    <t-cell title="标题文字">
-      <view class="cell-badge-wrap" slot="right-icon">
-        <t-stepper defaultValue="0" />
-      </view>
-    </t-cell>
-    <view class="t-stepper-wrapper-desc">带单位步进器</view>
-    <t-cell title="标题文字（单位）">
-      <view class="cell-badge-wrap" slot="right-icon">
-        <t-stepper defaultValue="0" step="2" />
-      </view>
-    </t-cell>
-    <view class="t-stepper-wrapper-desc">纯步进器</view>
+    <base />
+  </t-demo>
+  <t-demo desc="带单位步进器">
+    <step />
+  </t-demo>
+  <t-demo desc="纯步进器">
     <view class="pure-stepper-container">
-      <t-stepper value="{{value}}" bind:change="handleChange" theme="grey" inputWidth="{{72}}" />
+      <input-width />
     </view>
   </t-demo>
-
   <t-demo title="02 状态" desc="步进器状态">
     <view class="stepper-content">
-      <t-cell title="禁用">
-        <view class="cell-badge-wrap" slot="right-icon">
-          <t-stepper disabled="true" />
-        </view>
-      </t-cell>
-      <view class="interval" />
-      <t-cell title="禁用（单位）">
-        <view class="cell-badge-wrap" slot="right-icon">
-          <t-stepper step="2" disabled="true" />
-        </view>
-      </t-cell>
-      <view class="interval" />
-      <t-cell title="最小值 (5)">
-        <view class="cell-badge-wrap" slot="right-icon">
-          <t-stepper defaultValue="5" min="5" />
-        </view>
-      </t-cell>
-      <view class="interval" />
-      <t-cell title="最大值 (999)">
-        <view class="cell-badge-wrap" slot="right-icon">
-          <t-stepper defaultValue="999" max="999" />
-        </view>
-      </t-cell>
-      <view class="interval" />
-      <view class="pure-stepper-container">
-        <t-stepper disabled value="3" theme="grey" inputWidth="{{72}}" />
-        <t-stepper defaultValue="0" max="99" theme="grey" inputWidth="{{72}}" />
-        <t-stepper defaultValue="100" theme="grey" inputWidth="{{72}}" />
-      </view>
-      <view class="interval" />
-      <view class="interval" />
+      <status />
+      <min-max />
+      <other />
     </view>
   </t-demo>
 </view>