feat: 单选按钮组新增设置支持占满父元素,子按钮平分空间 (#328)

Co-authored-by: blankzhang <[email protected]>
WeBankFinTech · Jun 16, 2023 · 08273d0 · 08273d0
1 parent 29ee93d
commit 08273d0
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 0 deletions.
diff --git a/components/radio-button/radio-button.tsx b/components/radio-button/radio-button.tsx
@@ -43,6 +43,7 @@ export default defineComponent({
                 checked.value && group.props.bordered
                     ? `is-checked-${group.props.type}-${'border'}`
                     : '',
+                group.props.fullLine ? 'is-flex' : '',
             ];
         });
 

diff --git a/components/radio-button/style/index.less b/components/radio-button/style/index.less
@@ -129,4 +129,9 @@
     &.is-disabled.fes-radio-button-border {
         border: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
     }
+
+    // 按钮平分空间
+    &.is-flex {
+        flex: 1;
+    }
 }
diff --git a/components/radio-group/const.ts b/components/radio-group/const.ts
@@ -44,6 +44,10 @@ export const radioGroupProps = {
         type: String as PropType<OptionType>,
         default: 'default' as OptionType,
     },
+    fullLine: {
+        type: Boolean,
+        default: false,
+    },
 } as const;
 
 export type RadioGroupProps = Partial<ExtractPropTypes<typeof radioGroupProps>>;
diff --git a/components/radio-group/radio-group.vue b/components/radio-group/radio-group.vue
@@ -47,6 +47,7 @@ export default defineComponent({
         const classList = computed(() => [
             prefixCls,
             props.vertical && 'is-vertical',
+            props.fullLine && 'is-full-line',
             (props.disabled || isFormDisabled.value) && 'is-disabled',
         ]);
 

diff --git a/components/radio-group/style/index.less b/components/radio-group/style/index.less
@@ -29,4 +29,8 @@
         flex-direction: column;
         align-items: flex-start;
     }
+
+    &.is-full-line {
+        width: 100%;
+    }
 }
diff --git a/docs/.vitepress/components/radio/index.md b/docs/.vitepress/components/radio/index.md
@@ -81,6 +81,7 @@ app.use(FRadioButton);
 | type     | 按钮样式类型  可选值 `default` `primary`   | string | `default`  |
 | size     | 按钮大小 可选值 `small` `middle`    | string  | `middle`  |
 | bordered    | 按钮是否含有边框             | boolean  | `true`  |
+| fullLine    | 是否撑满整个父容器宽度             | boolean  | `false`  |
 
 ## RadioButton Props