docs(Radio): improve document (#2315)

example/pages/image/index.wxss

@@ -1,3 +1,7 @@
+page {
+  background-color: #fff;
+}
+
 .text {
   width: 100%;
   margin-top: 5px;

example/pages/radio/index.js

@@ -5,13 +5,14 @@ Page({
     radio1: '1',
     radio2: '2',
     radio3: '1',
+    radio4: '1',
+    radio5: '1',
     icon: {
       normal:
         'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
       active:
         'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
-    },
+    }
-    list: ['1', '2', '3', '4']
   },
 
   onChange(event) {
@@ -22,7 +23,7 @@ Page({
   onClick(event) {
     const { name } = event.currentTarget.dataset;
     this.setData({
-      radio3: name
+      radio5: name
     });
   }
 });

example/pages/radio/index.wxml

@@ -2,11 +2,10 @@
   <van-radio-group
     value="{{ radio1 }}"
     data-key="radio1"
-    custom-class="demo-radio-group"
     bind:change="onChange"
   >
     <van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
-    <van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
+    <van-radio name="2">单选框 2</van-radio>
   </van-radio-group>
 </demo-block>
 
@@ -15,50 +14,69 @@
     disabled
     value="{{ radio2 }}"
     data-key="radio2"
-    custom-class="demo-radio-group"
     bind:change="onChange"
   >
     <van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
-    <van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
+    <van-radio name="2">单选框 2</van-radio>
   </van-radio-group>
 </demo-block>
 
 <demo-block title="自定义颜色" padding>
-  <van-radio
+  <van-radio-group
-    name="1"
+    value="{{ radio3 }}"
-    value="1"
+    data-key="radio3"
-    custom-class="demo-radio"
+    bind:change="onChange"
-    checked-color="#07c160"
   >
-    单选框
+    <van-radio name="1" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
-  </van-radio>
+    <van-radio name="2" checked-color="#07c160">单选框</van-radio>
+  </van-radio-group>
 </demo-block>
 
 <demo-block title="自定义图标" padding>
-  <van-radio use-icon-slot value="1" name="1">
+  <van-radio-group
-    自定义图标
+    value="{{ radio4 }}"
-    <image
+    data-key="radio4"
-      slot="icon"
+    bind:change="onChange"
-      src="{{ radio3 === '1' ? icon.active : icon.normal }}"
+  >
-      class="icon"
+    <van-radio use-icon-slot name="1">
-      mode="widthFix"
+      自定义图标
-    />
+      <image
-  </van-radio>
+        slot="icon"
+        src="{{ radio4 === '1' ? icon.active : icon.normal }}"
+        class="icon"
+        mode="widthFix"
+      />
+    </van-radio>
+    <van-radio use-icon-slot name="2">
+      自定义图标
+      <image
+        slot="icon"
+        src="{{ radio4 === '2' ? icon.active : icon.normal }}"
+        class="icon"
+        mode="widthFix"
+      />
+    </van-radio>
+  </van-radio-group>
 </demo-block>
 
 <demo-block title="与 Cell 组件一起使用">
-  <van-radio-group value="{{ radio3 }}">
+  <van-radio-group value="{{ radio5 }}">
     <van-cell-group>
       <van-cell
-        wx:for="{{ list }}"
+        title="单选框 1"
-        wx:key="index"
-        title="单选框 {{ item }}"
-        value-class="value-class"
         clickable
-        data-name="{{ item }}"
+        data-name="1"
         bind:click="onClick"
       >
-        <van-radio name="{{ item }}" />
+        <van-radio slot="right-icon" name="1" />
+      </van-cell>
+      <van-cell
+        title="单选框 2"
+        clickable
+        data-name="2"
+        bind:click="onClick"
+      >
+        <van-radio slot="right-icon" name="2" />
       </van-cell>
     </van-cell-group>
   </van-radio-group>

example/pages/radio/index.wxss

@@ -1,15 +1,7 @@
-.demo-radio-group {
-  padding: 0 17px;
-}
-
 .demo-radio {
   margin-bottom: 10px;
 }
 
-.value-class {
-  flex: none !important;
-}
-
 .icon {
   width: 20px;
 }

packages/radio/README.md

@@ -29,7 +29,6 @@ Page({
   data: {
     radio: '1'
   },
-
   onChange(event) {
     this.setData({
       radio: event.detail
@@ -40,7 +39,7 @@ Page({
 
 ### 禁用状态
 
-通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
+通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
 
 ```html
 <van-radio-group value="{{ radio }}" bind:change="onChange" disabled>
@@ -51,22 +50,31 @@ Page({
 
 ### 自定义颜色
 
+通过`checked-color`属性设置选中状态的图标颜色
+
  ```html
-<van-radio checked-color="#07c160">复选框</van-radio>
+<van-radio-group value="{{ radio }}" bind:change="onChange">
+  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
+  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
+</van-radio-group>
+
 ```
 
 ### 自定义图标
 
-通过 icon 插槽自定义图标
+通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性
 
 ```html
-<van-radio use-icon-slot value="{{ radio }}" name="1" bind:change="onChange">
+<van-radio-group value="{{ radio }}" bind:change="onChange">
-  自定义图标
+  <van-radio use-icon-slot value="{{ radio }}" name="1">
-  <image
+    自定义图标
-    slot="icon"
+    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
-    src="{{ radio === '1' ? icon.active : icon.normal }}"
+  </van-radio>
-  />
+  <van-radio use-icon-slot value="{{ radio }}" name="2">
-</van-radio>
+    自定义图标
+    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
+  </van-radio>
+</van-radio-group>
 ```
 
 ```js
@@ -78,7 +86,6 @@ Page({
       active: '//img.yzcdn.cn/icon-active.png'
     }
   },
-
   onChange(event) {
     this.setData({
       radio: event.detail
@@ -96,21 +103,19 @@ Page({
   <van-cell-group>
     <van-cell
       title="单选框 1"
-      value-class="value-class"
       clickable
       data-name="1"
       bind:click="onClick"
     >
-      <van-radio name="1" />
+      <van-radio slot="right-icon" name="1" />
     </van-cell>
     <van-cell
       title="单选框 2"
-      value-class="value-class"
       clickable
       data-name="2"
       bind:click="onClick"
     >
-      <van-radio name="2" />
+      <van-radio slot="right-icon" name="2" />
     </van-cell>
   </van-cell-group>
 </van-radio-group>
@@ -137,27 +142,29 @@ Page({
 });
 ```
 
-```css
-.value-class {
-  flex: none !important;
-}
-```
 
 ## API
 
+### RadioGroup Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|-----------|-----------|-----------|-------------|-------------|
+| name | 在表单内提交时的标识符 | *string* | - | - |
+| value | 当前选中项的标识符 | *any* | - | - |
+| disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
+
 ### Radio Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-------------|-------------|
-| name | 标识 Radio 名称 | *string* | - | - |
+| name | 标识符 | *string* | - | - |
-| value | 当前选中项的 name | *any* | - | - |
+| shape | 形状，可选值为 `square` | *string* | `round` | - |
-| shape | 形状，可选值为 `round` `square` | *string* | `round` | - |
 | disabled | 是否为禁用状态 | *boolean* | `false` | - |
-| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | label-disabled | 是否禁用文本内容点击 | *boolean* | `false` | - |
 | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
-| use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - |
+| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
+| use-icon-slot | 是否使用 icon 插槽 | *boolean* | `false` | - |
 
 ### Radio Event
 
@@ -173,14 +180,6 @@ Page({
 | icon-class | 图标样式类 |
 | label-class | 描述信息样式类 |
 
-### RadioGroup Props
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|-----------|-----------|-----------|-------------|-------------|
-| name | 在表单内提交时的标识符 | *string* | - | - |
-| value | 当前选中项的 name | *any* | - | - |
-| disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
-
 ### RadioGroup Event
 
 | 事件名 | 说明 | 回调参数 |