From 9f173eac00f0b1ed78f85ba7583199bb331a8ab3 Mon Sep 17 00:00:00 2001
From: linrz <33575974+linrz@users.noreply.github.com>
Date: Mon, 23 Dec 2019 10:14:26 +0800
Subject: [PATCH] docs(Button/Cell/Checkbox/Radio):  update some examples
 (#2576)

* docs: complete some examples of  button/cell/checbox/radio

* docs: update button text

* docs: add some usage of button/cell/checbox/radio
---
 example/pages/button/index.wxml   |  5 +++++
 example/pages/cell/index.wxml     |  8 ++++++++
 example/pages/checkbox/index.js   |  2 ++
 example/pages/checkbox/index.wxml | 24 ++++++++++++++++++++++
 example/pages/radio/index.js      |  3 +++
 example/pages/radio/index.wxml    | 33 +++++++++++++++++++++++++++++++
 packages/button/README.md         |  8 ++++++++
 packages/cell/README.md           |  8 ++++++++
 packages/checkbox/README.md       | 16 +++++++++++++++
 packages/checkbox/index.less      |  1 +
 packages/radio/README.md          | 22 +++++++++++++++++++++
 packages/radio/index.less         |  4 +++-
 packages/radio/index.wxml         |  2 +-
 13 files changed, 134 insertions(+), 2 deletions(-)

diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index e3e70762..7112df32 100644
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@@ -53,4 +53,9 @@
     <van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
     <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
   </demo-block>
+
+  <demo-block title="块级元素按钮" padding>
+    <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
+    <van-button type="primary" block>块级元素按钮</van-button>
+  </demo-block>
 </demo-section>
diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index 4ddf551f..f087247e 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -79,3 +79,11 @@
     <van-icon slot="right-icon" name="search" />
   </van-cell>
 </demo-block>
+
+<demo-block title="垂直居中">
+  <van-cell
+    title="单元格"
+    value="多行内容多行内容多行内容多行内容"
+    center
+  />
+</demo-block>
diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js
index 1e36cfaf..cde6932d 100644
--- a/example/pages/checkbox/index.js
+++ b/example/pages/checkbox/index.js
@@ -5,6 +5,8 @@ Page({
     checkbox1: true,
     checkbox2: true,
     checkbox3: true,
+    checkboxLabel: true,
+    checkboxSize: true,
     checkboxShape: true,
     list: ['a', 'b', 'c'],
     result: ['a', 'b'],
diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml
index 841b1981..c78391dc 100644
--- a/example/pages/checkbox/index.wxml
+++ b/example/pages/checkbox/index.wxml
@@ -26,6 +26,18 @@
   </van-checkbox>
 </demo-block>
 
+<demo-block title="禁用复选框文本点击">
+  <van-checkbox
+    label-disabled
+    value="{{ checkboxLabel }}"
+    data-key="checkboxLabel"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    复选框
+  </van-checkbox>
+</demo-block>
+
 <demo-block title="自定义形状">
   <van-checkbox
     value="{{ checkboxShape }}"
@@ -50,6 +62,18 @@
   </van-checkbox>
 </demo-block>
 
+<demo-block title="自定义大小">
+  <van-checkbox
+    icon-size="25px"
+    value="{{ checkboxSize }}"
+    data-key="checkboxSize"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    复选框
+  </van-checkbox>
+</demo-block>
+
 <demo-block title="自定义图标">
   <van-checkbox
     use-icon-slot
diff --git a/example/pages/radio/index.js b/example/pages/radio/index.js
index 8849cc17..8470cc50 100644
--- a/example/pages/radio/index.js
+++ b/example/pages/radio/index.js
@@ -7,6 +7,9 @@ Page({
     radio3: '1',
     radio4: '1',
     radio5: '1',
+    radioSize: '1',
+    radioLabel: '1',
+    radioShape: '1',
     icon: {
       normal:
         'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
index abdf6bcd..5fd7f204 100644
--- a/example/pages/radio/index.wxml
+++ b/example/pages/radio/index.wxml
@@ -21,6 +21,28 @@
   </van-radio-group>
 </demo-block>
 
+<demo-block title="禁用单选框文本点击" padding>
+  <van-radio-group
+    value="{{ radioLabel }}"
+    data-key="radioLabel"
+    bind:change="onChange"
+  >
+    <van-radio label-disabled name="1" custom-class="demo-radio">单选框 1</van-radio>
+    <van-radio label-disabled name="2">单选框 2</van-radio>
+  </van-radio-group>
+</demo-block>
+
+<demo-block title="自定义形状" padding>
+  <van-radio-group
+    value="{{ radioShape }}"
+    data-key="radioShape"
+    bind:change="onChange"
+  >
+    <van-radio name="1" shape="square" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
+    <van-radio name="2" shape="square" checked-color="#07c160">单选框</van-radio>
+  </van-radio-group>
+</demo-block>
+
 <demo-block title="自定义颜色" padding>
   <van-radio-group
     value="{{ radio3 }}"
@@ -32,6 +54,17 @@
   </van-radio-group>
 </demo-block>
 
+<demo-block title="自定义大小" padding>
+  <van-radio-group
+    value="{{ radioSize }}"
+    data-key="radioSize"
+    bind:change="onChange"
+  >
+    <van-radio name="1" icon-size="20px" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
+    <van-radio name="2" icon-size="25px" checked-color="#07c160">单选框</van-radio>
+  </van-radio-group>
+</demo-block>
+
 <demo-block title="自定义图标" padding>
   <van-radio-group
     value="{{ radio4 }}"
diff --git a/packages/button/README.md b/packages/button/README.md
index fbc7bb7f..34c34f3f 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -97,6 +97,14 @@
 <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
 ```
 
+### 块级元素按钮
+
+通过`block`属性可以设置按钮的元素类型
+
+```html
+<van-button type="primary" block>块级元素按钮</van-button>
+```
+
 ## API
 
 ### Props
diff --git a/packages/cell/README.md b/packages/cell/README.md
index cdc909f0..723ff0f7 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -93,6 +93,14 @@
 </van-cell>
 ```
 
+### 垂直居中
+
+通过`center`属性在多行文本时控制左侧标题垂直居中
+
+```html
+<van-cell center title="单元格" value="多行内容多行内容多行内容多行内容" />
+```
+
 ## API
 
 ### CellGroup Props
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
index 47f782b1..79251cd3 100644
--- a/packages/checkbox/README.md
+++ b/packages/checkbox/README.md
@@ -44,6 +44,14 @@ Page({
 </van-checkbox>
 ```
 
+### 禁用文本点击
+
+通过设置`label-disabled`属性可以禁用复选框文本点击
+
+```html
+<van-checkbox value="{{ checked }}" icon-disabled>复选框</van-checkbox>
+```
+
 ### 自定义形状
 
 将`shape`属性设置为`square`，复选框的形状会变成方形
@@ -64,6 +72,14 @@ Page({
 </van-checkbox>
 ```
 
+### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小
+
+```html
+<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>
+```
+
 ### 自定义图标
 
 通过 icon 插槽自定义图标
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 319af050..4abf30e9 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -3,6 +3,7 @@
 
 .van-checkbox {
   display: flex;
+  align-items: center;
   overflow: hidden;
   user-select: none;
 
diff --git a/packages/radio/README.md b/packages/radio/README.md
index 250212de..3b110543 100644
--- a/packages/radio/README.md
+++ b/packages/radio/README.md
@@ -48,6 +48,17 @@ Page({
 </van-radio-group>
 ```
 
+### 禁用文本点击
+
+通过设置`label-disabled`属性可以禁用单选框文本点击
+
+```html
+<van-radio-group value="{{ radio }}" bind:change="onChange">
+  <van-radio name="1" icon-disabled>单选框 1</van-radio>
+  <van-radio name="2" icon-disabled>单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 自定义颜色
 
 通过`checked-color`属性设置选中状态的图标颜色
@@ -60,6 +71,17 @@ Page({
 
 ```
 
+### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小
+
+```html
+<van-radio-group value="{{ radio }}" bind:change="onChange">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2" icon-size="25px">单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 自定义图标
 
 通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 289a18c6..21375abb 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -12,7 +12,9 @@
   }
 
   &__icon {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     box-sizing: border-box;
     width: 1em;
     height: 1em;
diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml
index 38193f0f..0b748eff 100644
--- a/packages/radio/index.wxml
+++ b/packages/radio/index.wxml
@@ -14,7 +14,7 @@
       wx:else
       name="success"
       class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
-      style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
+      style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
       custom-class="icon-class"
       custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;"
     />