feat(RadioGroup): add direction prop

src/mixins/checkbox.js

@@ -36,6 +36,10 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
       return (this.parent && this.parent.disabled) || this.disabled;
     },
 
+    direction() {
+      return (this.parent && this.parent.direction) || null;
+    },
+
     iconStyle() {
       const checkedColor =
         this.checkedColor || (this.parent && this.parent.checkedColor);
@@ -120,10 +124,13 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     return (
       <div
         role={role}
-        class={bem({
+        class={bem([
+          {
             disabled: this.isDisabled,
             'label-disabled': this.labelDisabled,
-        })}
+          },
+          this.direction,
+        ])}
         tabindex={this.tabindex}
         aria-checked={String(this.checked)}
         onClick={this.onClick}

src/radio-group/index.js

@@ -9,6 +9,7 @@ export default createComponent({
   props: {
     value: null,
     disabled: Boolean,
+    direction: String,
     checkedColor: String,
     iconSize: [Number, String],
   },
@@ -21,7 +22,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={bem()} role="radiogroup">
+      <div class={bem([this.direction])} role="radiogroup">
         {this.slots()}
       </div>
     );

src/radio-group/index.less

@@ -0,0 +1,8 @@
+@import '../style/var';
+
+.van-radio-group {
+  &--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}

src/radio/README.md

@@ -33,6 +33,15 @@ export default {
 };
 ```
 
+### Horizontal
+
+```html
+<van-radio-group v-model="radio" direction="horizontal">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
+</van-radio-group>
+```
+
 ### Disabled
 
 ```html
@@ -150,6 +159,7 @@ export default {
 |------|------|------|------|
 | v-model (v-model) | Name of checked radio | *any* | - |
 | disabled | Disable all radios | *boolean* | `false` |
+| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` |
 | icon-size `v2.2.3` | Icon size of all radios | *number \| string* | `20px` |
 | checked-color `v2.2.3` | Checked color of all radios | *string* | `#1989fa` | - |
 

src/radio/README.zh-CN.md

@@ -33,6 +33,17 @@ export default {
 };
 ```
 
+### 水平排列
+
+将`direction`属性设置为`horizontal`后，单选框组会变成水平排列
+
+```html
+<van-radio-group v-model="radio" direction="horizontal">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
+</van-radio-group>
+```
+
 ### 禁用状态
 
 通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项
@@ -160,6 +171,7 @@ export default {
 |------|------|------|------|
 | v-model (value) | 当前选中项的标识符 | *any* | - |
 | disabled | 是否禁用所有单选框 | *boolean* | `false` |
+| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` |
 | icon-size `v2.2.3` | 所有单选框的图标大小，默认单位为`px` | *number \| string* | `20px` |
 | checked-color `v2.2.3` | 所有单选框的选中状态颜色 | *string* | `#1989fa` |
 

src/radio/demo/index.vue

@@ -7,6 +7,17 @@
       </van-radio-group>
     </demo-block>
 
+    <demo-block v-if="!isWeapp" :title="$t('horizontal')">
+      <van-radio-group
+        v-model="radioHorizontal"
+        class="demo-radio-group"
+        direction="horizontal"
+      >
+        <van-radio name="1">{{ $t('radio') }} 1</van-radio>
+        <van-radio name="2">{{ $t('radio') }} 2</van-radio>
+      </van-radio-group>
+    </demo-block>
+
     <demo-block :title="$t('disabled')">
       <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
@@ -89,22 +100,24 @@ export default {
       radio: '单选框',
       text1: '未选中禁用',
       text2: '选中且禁用',
+      withCell: '与 Cell 组件一起使用',
+      horizontal: '水平排列',
       customIcon: '自定义图标',
-      customIconSize: '自定义大小',
       customColor: '自定义颜色',
       customShape: '自定义形状',
-      withCell: '与 Cell 组件一起使用',
+      customIconSize: '自定义大小',
       disabledLabelClick: '禁用文本点击',
     },
     'en-US': {
       radio: 'Radio',
       text1: 'Disabled',
       text2: 'Disabled and checked',
+      withCell: 'Inside a Cell',
+      horizontal: 'Hrizontal',
       customIcon: 'Custom Icon',
-      customIconSize: 'Custom Icon Size',
       customColor: 'Custom Color',
       customShape: 'Custom Shape',
-      withCell: 'Inside a Cell',
+      customIconSize: 'Custom Icon Size',
       disabledLabelClick: 'Disable the click event of label',
     },
   },
@@ -117,8 +130,9 @@ export default {
       radio4: '1',
       radio5: '1',
       radioLabel: '1',
-      radioIconSize: '1',
       radioShape: '1',
+      radioIconSize: '1',
+      radioHorizontal: '1',
       icon: {
         active: 'https://img.yzcdn.cn/vant/user-active.png',
         inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
@@ -135,15 +149,19 @@ export default {
   background: @white;
 
   &-group {
-    padding: 0 17px;
+    padding: 0 16px;
 
-    .van-radio:not(:last-child) {
-      margin-bottom: 10px;
+    .van-radio {
+      margin-bottom: 8px;
     }
   }
 
   img {
     height: 20px;
   }
+
+  .van-doc-demo-block__title {
+    margin-top: -8px;
+  }
 }
 </style>

src/radio/index.less

@@ -15,6 +15,10 @@
     cursor: default;
   }
 
+  &--horizontal {
+    margin-right: 12px;
+  }
+
   &__icon {
     flex: none;
     height: 1em;

src/radio/test/__snapshots__/demo.spec.js.snap

@@ -14,6 +14,18 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div role="radiogroup" class="demo-radio-group van-radio-group van-radio-group--horizontal">
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
+            <!----></i></div><span class="van-radio__label">单选框 1</span>
+      </div>
+      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--horizontal">
+        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
+            <!----></i></div><span class="van-radio__label">单选框 2</span>
+      </div>
+    </div>
+  </div>
   <div>
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--disabled">