Merge pull request #615 from wangyuan0108/docs/switch

Docs/switch

src/switch/README.md

@@ -21,13 +21,23 @@ isComponent: true
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/switch.png" width="375px" height="50%">
 
-```html
-<!-- page.wxml -->
+{{ base }}
+
+
+### 开关状态
+
+{{ status }}
+
 
-<!-- 受控用法 -->
+### 受控用法
+
+```html
 <t-switch value="{{value}}" bindchange="onChange"></t-switch>
 
-<!-- 非受控用法 -->
+```
+### 非受控用法
+
+```html
 <t-switch defaultValue="{{value}}"></t-switch>
 ```
 

src/switch/_example/base/index.js

@@ -0,0 +1,10 @@
+Component({
+  data: {
+    defaultVal: true,
+  },
+  handleChange(e) {
+    this.setData({
+      defaultVal: e.detail.value,
+    });
+  },
+});

src/switch/_example/base/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/switch/_example/base/index.wxml

@@ -0,0 +1,26 @@
+<view class="group">
+  <t-cell title="默认">
+    <t-switch defaultValue="{{true}}"></t-switch>
+  </t-cell>
+  <t-cell title="默认关">
+    <t-switch defaultValue="{{false}}"></t-switch>
+  </t-cell>
+  <t-cell title="自定义颜色">
+    <t-switch defaultValue="{{true}}" colors="{{['#00A870']}}"></t-switch>
+  </t-cell>
+  <t-cell title="异步操作" bordered="{{false}}">
+    <t-switch defaultValue="{{true}}"></t-switch>
+  </t-cell>
+</view>
+
+<view class="group">
+  <t-cell title="默认">
+    <t-switch bindchange="handleChange" value="{{defaultVal}}" label="描述信息"></t-switch>
+  </t-cell>
+  <t-cell title="默认关">
+    <t-switch defaultValue="{{false}}" label="描述信息"></t-switch>
+  </t-cell>
+  <t-cell title="自定义颜色" bordered="{{false}}">
+    <t-switch defaultValue="{{true}}" colors="{{['#00A870']}}" label="描述信息"></t-switch>
+  </t-cell>
+</view>

src/switch/_example/base/index.wxss

@@ -0,0 +1,3 @@
+.group {
+  margin-top: 24px;
+}

src/switch/_example/status/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/switch/_example/status/index.wxml

@@ -0,0 +1,12 @@
+<t-cell title="开关">
+  <t-switch defaultValue="{{true}}" disabled></t-switch>
+</t-cell>
+<t-cell title="开关">
+  <t-switch defaultValue="{{false}}" disabled></t-switch>
+</t-cell>
+<t-cell title="开关">
+  <t-switch defaultValue="{{true}}" label="描述信息" disabled></t-switch>
+</t-cell>
+<t-cell title="开关" bordered="{{false}}">
+  <t-switch defaultValue="{{false}}" label="描述信息" disabled></t-switch>
+</t-cell>

src/switch/_example/switch.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Switch",
   "usingComponents": {
-    "t-demo": "../../components/demo-block"
+    "t-demo": "../../components/demo-block",
+    "base": "./base",
+    "status": "./status"
   }
 }

src/switch/_example/switch.wxml

@@ -3,48 +3,10 @@
   <view class="demo-desc">用于控制某个功能的开启和关闭。</view>
 
   <t-demo title="01 类型" desc="基础开关">
-    <view class="group">
-      <t-cell title="默认">
-        <t-switch defaultValue="{{true}}" slot="note" />
-      </t-cell>
-      <t-cell title="默认关">
-        <t-switch defaultValue="{{false}}" slot="note" />
-      </t-cell>
-      <t-cell title="自定义颜色">
-        <t-switch defaultValue="{{true}}" colors="{{['#00A870']}}" slot="note" />
-      </t-cell>
-      <t-cell title="异步操作" bordered="{{false}}">
-        <t-switch defaultValue="{{true}}" slot="note" />
-      </t-cell>
-    </view>
-
-    <view class="group">
-      <t-cell title="默认">
-        <t-switch bindchange="handleChange" value="{{defaultVal}}" label="描述信息" slot="note" />
-      </t-cell>
-      <t-cell title="默认关">
-        <t-switch defaultValue="{{false}}" label="描述信息" slot="note" />
-      </t-cell>
-      <t-cell title="自定义颜色" bordered="{{false}}">
-        <t-switch defaultValue="{{true}}" colors="{{['#00A870']}}" label="描述信息" slot="note" />
-      </t-cell>
-    </view>
+    <base />
   </t-demo>
 
   <t-demo title="02 状态" desc="开关状态">
-    <view class="group">
-      <t-cell title="开关">
-        <t-switch defaultValue="{{true}}" disabled slot="note" />
-      </t-cell>
-      <t-cell title="开关">
-        <t-switch defaultValue="{{false}}" disabled slot="note" />
-      </t-cell>
-      <t-cell title="开关">
-        <t-switch defaultValue="{{true}}" label="描述信息" disabled slot="note" />
-      </t-cell>
-      <t-cell title="开关" bordered="{{false}}">
-        <t-switch defaultValue="{{false}}" label="描述信息" disabled slot="note" />
-      </t-cell>
-    </view>
+    <status />
   </t-demo>
 </view>