[Improvement] Reorganize document (#1066)

2018-05-15 10:39:01 +08:00
parent b1142fd862
commit e8aad7246c
124 changed files with 181 additions and 186 deletions
@@ -0,0 +1,75 @@
+## Radio
+
+### Install
+``` javascript
+import { RadioGroup, Radio } from 'vant';
+
+Vue.use(RadioGroup);
+Vue.use(Radio);
+```
+
+### Usage
+
+#### Basic Usage
+Use `v-model` to bind the name of checked radio
+
+```html
+<van-radio-group v-model="radio">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
+</van-radio-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio: '1'
+    }
+  }
+};
+```
+
+#### Disabled
+
+```html
+<van-radio-group v-model="radio" disabled>
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
+</van-radio-group>
+```
+
+#### Inside a Cell
+
+```html
+<van-radio-group v-model="radio">
+  <van-cell-group>
+    <van-cell :title="Radio 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="Radio 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+### Radio API
+
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| name | Radio name | `any` | - |
+| disabled | Whether to disable radio | `Boolean` | `false` |
+
+### RadioGroup API
+
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| v-model | Name of checked radio | `any` | - |
+| disabled | Diable all radios | `Boolean` | `false` |
+
+### RadioGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
@@ -0,0 +1,77 @@
+## Radio 单选框
+
+### 使用指南
+``` javascript
+import { RadioGroup, Radio } from 'vant';
+
+Vue.use(RadioGroup);
+Vue.use(Radio);
+```
+
+### 代码演示
+
+#### 基础用法
+通过`v-model`绑定值当前选中项的 name
+
+```html
+<van-radio-group v-model="radio">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio: '1'
+    }
+  }
+};
+```
+
+#### 禁用状态
+通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
+
+```html
+<van-radio-group v-model="radio" disabled>
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
+#### 与 Cell 组件一起使用
+此时你需要再引入`Cell`和`CellGroup`组件。
+
+```html
+<van-radio-group v-model="radio">
+  <van-cell-group>
+    <van-cell :title="单选框 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="单选框 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+### Radio API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| name | 唯一标识符 | 任意类型 | - |
+| disabled | 是否为禁用状态 | `Boolean` | `false` |
+
+### RadioGroup API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| v-model | 当前选中项的 name | 任意类型 | - |
+| disabled | 是否禁用所有单选框 | `Boolean` | `false` |
+
+### RadioGroup Event
+
+| 事件名称 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前选中项的 name |