docs(checkbox): add colNum doc

sunshine5856 · Aug 7, 2019 · 914fbb7 · 914fbb7
1 parent 020bdd8
commit 914fbb7
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 15 deletions.
diff --git a/document/components/docs/en-US/checkbox-group.md b/document/components/docs/en-US/checkbox-group.md
@@ -58,12 +58,30 @@
 
   Use `cube-checkbox`, [cube-checkbox doc](#/en-US/docs/checkbox).
 
+- Set column number<sup>1.12.28</sup>
+
+  You can use `colNum` to control the display columns
+  ```html
+    <cube-checkbox-group v-model="colCheckList" :options="colOptions" :col-num="3" />
+  ```
+  ```js
+  export default {
+    data() {
+      return {
+        colCheckList: [],
+        colOptions: ['1', '2', '3', '4', '5', '6', '7', '8']
+      }
+    }
+  }
+  ```
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
 | options | array of checkbox options | Array | - | - |
 | horizontal | whether in horizontal order | Boolean | true/false | false |
+| colNum<sup>1.12.28</sup> | column number | Number | - | 1 |
 | shape | icon shape | String | circle/square | circle |
 | hollowStyle | whether is hollow-out style | Boolean | true/false | false |
 | min<sup>1.11.0</sup> | min selected items count | Number | - | 0 |

diff --git a/document/components/docs/en-US/radio.md b/document/components/docs/en-US/radio.md
@@ -132,12 +132,68 @@ Radio component. You could set the options and the position of the radio's icon.
   }
   ```
 
+
+- Set column number<sup>1.12.28</sup>
+
+  You can use `colNum` to control the display columns
+  ```html
+  <cube-radio-group v-model="selected5" :options="options5" :col-num="colNum" />
+  ```
+
+  ```js
+  export default {
+    data() {
+      return {
+        selected5: '2',
+        options5: [
+          {
+            label: '1',
+            value: '1'
+          },
+          {
+            label: '2',
+            value: '2'
+          },
+          {
+            label: '3',
+            value: '3',
+            disabled: true
+          },
+          {
+            label: '4',
+            value: '4'
+          },
+          {
+            label: '5',
+            value: '5'
+          },
+          {
+            label: '6',
+            value: '6',
+            disabled: true
+          },
+          {
+            label: '7',
+            value: '7'
+          },
+          {
+            label: '8',
+            value: '8'
+          }
+        ],
+        colNum: 3
+      }
+    }
+  }
+  ```
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
 | options | the array of radio options | Array | - | - |
 | position | icon position | String | left/right | left |
+| colNum<sup>1.12.28</sup> | column number | Number | - | 1 |
 | horizontal | whether use horizontal layout | Boolean | true/false | false |
 | hollowStyle | whether is hollow-out style | Boolean | true/false | false |
 

diff --git a/document/components/docs/zh-CN/checkbox-group.md b/document/components/docs/zh-CN/checkbox-group.md
@@ -1,9 +1,5 @@
 ## CheckboxGroup 复选框组
 
-> 1.12.28 新增
-
-列数可配置
-
 复选框组就是一组复选框，主要用来选择一组可选项；有垂直和水平两种样式。
 
 ### 示例
@@ -60,20 +56,30 @@
 
   可通过默认插槽插入 `cube-checkbox` 实现自定义每项的结构样子，关于 `cube-checkbox`，请参考其[文档](#/zh-CN/docs/checkbox)。
 
-- 自定义列数
-  
+- 自定义列数<sup>1.12.28</sup>
+
   可通过设计 `colNum` 控制一行中有几列，colNum 小于1时，按1处理
   ```html
     <cube-checkbox-group v-model="colCheckList" :options="colOptions" :col-num="3" />
   ```
+  ```js
+  export default {
+    data() {
+      return {
+        colCheckList: [],
+        colOptions: ['1', '2', '3', '4', '5', '6', '7', '8']
+      }
+    }
+  }
+  ```
 
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
 | options | 选项数组 | Array | - | - |
 | horizontal | 是否水平排列 | Boolean | true/false | false |
-| colNum | 一行有几列 | Number | - | 1 |
+| colNum<sup>1.12.28</sup> | 一行有几列 | Number | - | 1 |
 | shape | 图标形状 | String | circle/square | circle |
 | hollowStyle | 是否是镂空样式的 | Boolean | true/false | false |
 | min<sup>1.11.0</sup> | 最小选择个数 | Number | - | 0 |

diff --git a/document/components/docs/zh-CN/radio.md b/document/components/docs/zh-CN/radio.md
@@ -4,10 +4,6 @@
 
 单选框组，可设置单选框组内容，样式等。
 
-> 1.12.28 新增
-
-列数可配置
-
 ### 示例
 
 - 基本用法
@@ -136,8 +132,8 @@
   }
   ```
 
-- 自定义列数
-  
+- 自定义列数<sup>1.12.28</sup>
+
   可通过设计 `colNum` 控制一行中有几列，colNum 小于1时，按1处理
   ```html
   <cube-radio-group v-model="selected5" :options="options5" :col-num="colNum" />
@@ -147,7 +143,7 @@
   export default {
     data() {
       return {
-        selected5: '2',
+        selected5: '6',
         options5: [
           {
             label: '1',
@@ -169,6 +165,19 @@
           {
             label: '5',
             value: '5'
+          },
+          {
+            label: '6',
+            value: '6',
+            disabled: true
+          },
+          {
+            label: '7',
+            value: '7'
+          },
+          {
+            label: '8',
+            value: '8'
           }
         ],
         colNum: 3
@@ -184,7 +193,7 @@
 | options | 选项数组 | Array | - | - |
 | position | 图标位置 | String | left/right | left |
 | horizontal | 是否水平排列 | Boolean | true/false | false |
-| colNum | 一行有几列 | Number | - | 1 |
+| colNum<sup>1.12.28</sup> | 一行有几列 | Number | - | 1 |
 | hollowStyle | 是否是镂空样式的 | Boolean | true/false | false |
 
 * `options` 子配置项