@@ -11,7 +11,7 @@ import FormTitle, { type FormTitleProps } from './FormTitle';
1111const { Item } = Form ;
1212
1313export 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
93100const 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