blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: add label-position:top for field and form (#11102)

Browse Source 
Co-authored-by: redsun1992 <sunhao@starwrap.net>
This commit is contained in:
sunhao 2022-10-04 09:01:14 +08:00 committed by GitHub
parent b61158aaee
commit ee923beecf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/field/README.md
View File

@ -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,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` |
| left-icon | Left side icon name | _string_ | - |

2
packages/vant/src/field/README.zh-CN.md
View File

@ -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 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| FieldAutosizeConfig_ | `false` |
| left-icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |

7
packages/vant/src/field/index.less
View File

@ -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;

2
packages/vant/src/field/types.ts
View File

@ -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';

2
packages/vant/src/form/README.md
View File

@ -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` |

2
packages/vant/src/form/README.zh-CN.md
View File

@ -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` |