From ee923beecf8fd99ec23586b6d73b066ccb38da97 Mon Sep 17 00:00:00 2001 From: sunhao Date: Tue, 4 Oct 2022 09:01:14 +0800 Subject: [PATCH] feat: add label-position:top for field and form (#11102) Co-authored-by: redsun1992 --- packages/vant/src/field/README.md | 2 +- packages/vant/src/field/README.zh-CN.md | 2 +- packages/vant/src/field/index.less | 7 +++++++ packages/vant/src/field/types.ts | 2 +- packages/vant/src/form/README.md | 2 +- packages/vant/src/form/README.zh-CN.md | 2 +- 6 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 942ec0f57..2054e8aa8 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -276,7 +276,7 @@ Use `input-align` prop to align the input value. | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` | | label-class | Label className | _string \| Array \| object_ | - | | label-width | Label width | _number \| string_ | `6.2em` | -| label-align | Label align, can be set to `center` `right` | _FieldTextAlign_ | `left` | +| label-align | Label align, can be set to `center` `right` `top` | _FieldTextAlign_ | `left` | | input-align | Input align, can be set to `center` `right` | _FieldTextAlign_ | `left` | | autosize | Textarea auto resize, can accept an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` | | left-icon | Left side icon name | _string_ | - | diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index 1d54c6f08..bda44be3d 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -295,7 +295,7 @@ export default { | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | | label-class | 左侧文本额外类名 | _string \| Array \| object_ | - | | label-width | 左侧文本宽度，默认单位为 `px` | _number \| string_ | `6.2em` | -| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` | +| label-align | 左侧文本对齐方式，可选值为 `center` `right` `top` | _FieldTextAlign_ | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` | | autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| FieldAutosizeConfig_ | `false` | | left-icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - | diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less index d793036c6..46be61595 100644 --- a/packages/vant/src/field/index.less +++ b/packages/vant/src/field/index.less @@ -21,6 +21,8 @@ } .van-field { + flex-wrap: wrap; + &__label { flex: none; box-sizing: border-box; @@ -38,6 +40,11 @@ text-align: right; } + &--top { + width: 100%; + text-align: left; + } + &--required { &::before { margin-right: 2px; diff --git a/packages/vant/src/field/types.ts b/packages/vant/src/field/types.ts index d1dab9d44..ee44865ea 100644 --- a/packages/vant/src/field/types.ts +++ b/packages/vant/src/field/types.ts @@ -28,7 +28,7 @@ export type FieldType = | 'textarea' | 'datetime-local'; -export type FieldTextAlign = 'left' | 'center' | 'right'; +export type FieldTextAlign = 'left' | 'center' | 'right' | 'top'; export type FieldClearTrigger = 'always' | 'focus'; diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index 44ed7205d..a2d6d1575 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -492,7 +492,7 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | | label-width | Field label width | _number \| string_ | `6.2em` | -| label-align | Field label align, can be set to `center` `right` | _string_ | `left` | +| label-align | Field label align, can be set to `center` `right` `top` | _string_ | `left` | | input-align | Field input align, can be set to `center` `right` | _string_ | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | | validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit`, supports using array to set multiple values | _string \| string[]_ | `onBlur` | diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index d5456ad23..e4fddee4a 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -524,7 +524,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6.2em` | -| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` | +| label-align | 表单项 label 对齐方式，可选值为 `center` `right` `top` | _string_ | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | | validate-trigger | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，支持通过数组同时设置多个值，具体用法见下方表格 | _string \| string[]_ | `onBlur` |