feat(Checkbox): add direction prop (#4265)

* feat(Checkbox): add direction prop

* docs(checkbox): update doc

example/pages/checkbox/index.js

@@ -12,8 +12,9 @@ Page({
     result: ['a', 'b'],
     result2: [],
     result3: [],
+    result4: [],
     activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
   },
 
   onChange(event) {
@@ -24,7 +25,7 @@ Page({
   onClick(event) {
     const { value } = event.currentTarget.dataset;
     this.setData({
-      radio3: value
+      radio3: value,
     });
   },
 
@@ -34,5 +35,5 @@ Page({
     checkbox.toggle();
   },
 
-  noop() {}
+  noop() {},
 });

example/pages/checkbox/index.wxml

@@ -105,6 +105,19 @@
   </van-checkbox-group>
 </demo-block>
 
+<demo-block title="水平排列">
+  <van-checkbox-group direction="horizontal" value="{{ result4 }}" data-key="result4" bind:change="onChange">
+    <van-checkbox
+      wx:for="{{ list }}"
+      wx:key="*this"
+      name="{{ item }}"
+      custom-class="demo-checkbox"
+    >
+      复选框 {{ item }}
+    </van-checkbox>
+  </van-checkbox-group>
+</demo-block>
+
 <demo-block title="限制最大可选数">
   <van-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
     <van-checkbox

packages/checkbox-group/index.less

@@ -1 +1,6 @@
-// empty
+.van-checkbox-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

packages/checkbox-group/index.ts

@@ -20,6 +20,10 @@ VantComponent({
       type: Boolean,
       observer: 'updateChildren',
     },
+    direction: {
+      type: String,
+      value: 'vertical',
+    },
   },
 
   methods: {
@@ -28,10 +32,11 @@ VantComponent({
     },
 
     updateChild(child: TrivialInstance) {
-      const { value, disabled } = this.data;
+      const { value, disabled, direction } = this.data;
       child.setData({
         value: value.indexOf(child.data.name) !== -1,
         parentDisabled: disabled,
+        direction,
       });
     },
   },

packages/checkbox-group/index.wxml

@@ -1 +1,5 @@
-<slot />
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
+  <slot />
+</view>

packages/checkbox/README.md

@@ -211,26 +211,27 @@ Page({
 
 ### Checkbox Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| name | 标识 Checkbox 名称 | _string_ | - | - |
-| shape | 形状，可选值为 `round` `square` | _string_ | `round` | - |
-| value | 是否为选中状态 | _boolean_ | `false` | - |
-| disabled | 是否禁用单选框 | _boolean_ | `false` | - |
-| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` | - |
-| label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
-| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` | - |
-| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
-| icon-size | icon 大小 | _string \| number_ | `20px` |
+| 参数           | 说明                            | 类型               | 默认值    |
+| -------------- | ------------------------------- | ------------------ | --------- |
+| name           | 标识 Checkbox 名称              | _string_           | -         |
+| shape          | 形状，可选值为 `round` `square` | _string_           | `round`   |
+| value          | 是否为选中状态                  | _boolean_          | `false`   |
+| disabled       | 是否禁用单选框                  | _boolean_          | `false`   |
+| label-disabled | 是否禁用单选框内容点击          | _boolean_          | `false`   |
+| label-position | 文本位置，可选值为 `left`       | _string_           | `right`   |
+| use-icon-slot  | 是否使用 icon slot              | _boolean_          | `false`   |
+| checked-color  | 选中状态颜色                    | _string_           | `#1989fa` |
+| icon-size      | icon 大小                       | _string \| number_ | `20px`    |
 
 ### CheckboxGroup Props
 
-| 参数     | 说明                   | 类型      | 默认值        | 版本 |
-| -------- | ---------------------- | --------- | ------------- | ---- |
-| name     | 在表单内提交时的标识符 | _string_  | -             | -    |
-| value    | 所有选中项的 name      | _Array_   | -             | -    |
-| disabled | 是否禁用所有单选框     | _boolean_ | `false`       | -    |
-| max      | 设置最大可选数         | _number_  | `0`（无限制） | -    |
+| 参数               | 说明                            | 类型      | 默认值        |
+| ------------------ | ------------------------------- | --------- | ------------- |
+| name               | 在表单内提交时的标识符          | _string_  | -             |
+| value              | 所有选中项的 name               | _Array_   | -             |
+| disabled           | 是否禁用所有单选框              | _boolean_ | `false`       |
+| max                | 设置最大可选数                  | _number_  | `0`（无限制） |
+| direction `v1.7.0` | 排列方向，可选值为 `horizontal` | _string_  | `vertical`    |
 
 ### Checkbox Event
 

packages/checkbox/index.less

@@ -7,6 +7,10 @@
   overflow: hidden;
   user-select: none;
 
+  &--horizontal {
+    margin-right: @padding-sm;
+  }
+
   &__icon-wrap,
   &__label {
     .theme(line-height, '@checkbox-size');

packages/checkbox/index.ts

@@ -38,6 +38,7 @@ VantComponent({
 
   data: {
     parentDisabled: false,
+    direction: 'vertical',
   },
 
   methods: {

packages/checkbox/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 <wxs src="./index.wxs" module="computed" />
 
-<view class="van-checkbox custom-class">
+<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
   <view
     wx:if="{{ labelPosition === 'left' }}"
     class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"