Skip to content

Commit 13bbb75

Browse files
🐛 fix: Fix Form vertical layout
1 parent 2b65df5 commit 13bbb75

File tree

1 file changed

+14
-4
lines changed

1 file changed

+14
-4
lines changed

src/Form/components/FormItem.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import FormTitle, { type FormTitleProps } from './FormTitle';
1111
const { Item } = Form;
1212

1313
export const useStyles = createStyles(
14-
({ css, responsive, prefixCls }, itemMinWidth?: string | number) => ({
14+
({ css, responsive, prefixCls }, { minWidth }: { minWidth?: string | number }) => ({
1515
item: css`
1616
&.${prefixCls}-form-item {
1717
padding-block: 16px;
@@ -59,7 +59,7 @@ export const useStyles = createStyles(
5959
`,
6060
itemMinWidth: css`
6161
.${prefixCls}-form-item-control {
62-
width: ${isNumber(itemMinWidth) ? `${itemMinWidth}px` : itemMinWidth};
62+
width: ${isNumber(minWidth) ? `${minWidth}px` : minWidth};
6363
}
6464
${responsive.mobile} {
6565
.${prefixCls}-row {
@@ -78,6 +78,13 @@ export const useStyles = createStyles(
7878
padding-block-start: 0;
7979
}
8080
`,
81+
verticalLayout: css`
82+
&.${prefixCls}-form-item {
83+
.${prefixCls}-row {
84+
align-items: stretch;
85+
}
86+
}
87+
`,
8188
}),
8289
);
8390

@@ -91,8 +98,9 @@ export interface FormItemProps extends AntdFormItemProps {
9198
}
9299

93100
const FormItem = memo<FormItemProps>(
94-
({ desc, tag, minWidth, avatar, className, label, children, divider, ...rest }) => {
95-
const { cx, styles } = useStyles(minWidth);
101+
({ desc, tag, minWidth, avatar, className, label, children, divider, layout, ...rest }) => {
102+
const { cx, styles } = useStyles({ minWidth });
103+
const isVertical = layout === 'vertical';
96104
return (
97105
<>
98106
{divider && <FormDivider />}
@@ -101,9 +109,11 @@ const FormItem = memo<FormItemProps>(
101109
styles.item,
102110
Boolean(minWidth) && styles.itemMinWidth,
103111
!divider && styles.itemNoDivider,
112+
isVertical && styles.verticalLayout,
104113
className,
105114
)}
106115
label={<FormTitle avatar={avatar} desc={desc} tag={tag} title={label as any} />}
116+
layout={layout}
107117
{...rest}
108118
>
109119
{children}

0 commit comments

Comments
 (0)