feat(form-item): support string format for labelWidth/wrapperWidth

alibaba · Apr 16, 2021 · 228e259 · 228e259
1 parent 98922c8
commit 228e259
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -1068,8 +1068,8 @@ export default () => {
 | tooltip        | ReactNode                                              | 问号提示                                    | -         |
 | labelAlign     | `"left"` \| `"right"`                                  | 标签文本对齐方式                            | `"right"` |
 | labelWrap      | boolean                                                | 标签换⾏，否则出现省略号，hover 有 tooltip  | false     |
-| labelWidth     | number                                                 | 标签固定宽度                                | -         |
-| wrapperWidth   | number                                                 | 内容固定宽度                                | -         |
+| labelWidth     | `number \| string`                                     | 标签固定宽度                                | -         |
+| wrapperWidth   | `number \| string`                                     | 内容固定宽度                                | -         |
 | labelCol       | number                                                 | 标签⽹格所占列数，和内容列数加起来总和为 24 | -         |
 | wrapperCol     | number                                                 | 内容⽹格所占列数，和标签列数加起来总和为 24 | -         |
 | wrapperAlign   | `"left"` \| `"right"`                                  | 内容文本对齐方式⻬                          | `"left"`  |

diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -28,8 +28,8 @@ export interface IFormItemProps {
   labelStyle?: React.CSSProperties
   labelAlign?: 'left' | 'right'
   labelWrap?: boolean
-  labelWidth?: number
-  wrapperWidth?: number
+  labelWidth?: number | string
+  wrapperWidth?: number | string
   labelCol?: number
   wrapperCol?: number
   wrapperAlign?: 'left' | 'right'
@@ -128,12 +128,12 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   let enableCol = false
   if (labelWidth || wrapperWidth) {
     if (labelWidth) {
-      labelStyle.width = `${labelWidth}px`
-      labelStyle.maxWidth = `${labelWidth}px`
+      labelStyle.width = labelWidth
+      labelStyle.maxWidth = labelWidth
     }
     if (wrapperWidth) {
-      wrapperStyle.width = `${wrapperWidth}px`
-      wrapperStyle.maxWidth = `${wrapperWidth}px`
+      wrapperStyle.width = wrapperWidth
+      wrapperStyle.maxWidth = wrapperWidth
     }
     // 栅格模式
   } else if (labelCol || wrapperCol) {

diff --git a/packages/next/docs/components/FormItem.md b/packages/next/docs/components/FormItem.md
@@ -1051,8 +1051,8 @@ export default () => {
 | tooltip        | ReactNode                                              | 问号提示                                    | -         |
 | labelAlign     | `"left"` \| `"right"`                                  | 标签文本对齐方式                            | `"right"` |
 | labelWrap      | boolean                                                | 标签换⾏，否则出现省略号，hover 有 tooltip  | false     |
-| labelWidth     | number                                                 | 标签固定宽度                                | -         |
-| wrapperWidth   | number                                                 | 内容固定宽度                                | -         |
+| labelWidth     | `number \| string`                                     | 标签固定宽度                                | -         |
+| wrapperWidth   | `number \| string`                                     | 内容固定宽度                                | -         |
 | labelCol       | number                                                 | 标签⽹格所占列数，和内容列数加起来总和为 24 | -         |
 | wrapperCol     | number                                                 | 内容⽹格所占列数，和标签列数加起来总和为 24 | -         |
 | wrapperAlign   | `"left"` \| `"right"`                                  | 内容文本对齐方式⻬                          | `"left"`  |

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -28,8 +28,8 @@ export interface IFormItemProps {
   labelStyle?: React.CSSProperties
   labelAlign?: 'left' | 'right'
   labelWrap?: boolean
-  labelWidth?: number
-  wrapperWidth?: number
+  labelWidth?: number | string
+  wrapperWidth?: number | string
   labelCol?: number
   wrapperCol?: number
   wrapperAlign?: 'left' | 'right'
@@ -128,12 +128,12 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   let enableCol = false
   if (labelWidth || wrapperWidth) {
     if (labelWidth) {
-      labelStyle.width = `${labelWidth}px`
-      labelStyle.maxWidth = `${labelWidth}px`
+      labelStyle.width = labelWidth
+      labelStyle.maxWidth = labelWidth
     }
     if (wrapperWidth) {
-      wrapperStyle.width = `${wrapperWidth}px`
-      wrapperStyle.maxWidth = `${wrapperWidth}px`
+      wrapperStyle.width = wrapperWidth
+      wrapperStyle.maxWidth = wrapperWidth
     }
     // 栅格模式
   } else if (labelCol || wrapperCol) {