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

[Improvement] Field label align (#1353)

Browse Source
This commit is contained in:
neverland 2018-06-28 19:27:05 +08:00 committed by GitHub
parent 9bc40153e5
commit 64b2ba989e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/field/en-US.md
View File

@ -125,6 +125,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
| is-link | Whether to show link icon | `Boolean` | `false` | | is-link | Whether to show link icon | `Boolean` | `false` |
| error | Whether to show error info | `Boolean` | `false` | | error | Whether to show error info | `Boolean` | `false` |
| error-message | Error message | `String` | `''` | | error-message | Error message | `String` | `''` |
| label-align | Label text align, can be set to `center` `right` | `String` | `left` |
| input-align | Input text align, can be set to `center` `right` | `String` | `left` | | input-align | Input text align, can be set to `center` `right` | `String` | `left` |
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` | | autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
| icon | Right side icon name | `String` | - | | icon | Right side icon name | `String` | - |

2
packages/field/index.vue
View File

@ -9,7 +9,7 @@
:class="b({ :class="b({
error, error,
disabled: $attrs.disabled, disabled: $attrs.disabled,
[labelAlign]: labelAlign, [`label-${labelAlign}`]: labelAlign,
'min-height': type === 'textarea' && !autosize 'min-height': type === 'textarea' && !autosize
})" })"
> >

3
packages/field/zh-CN.md
View File

@ -117,7 +117,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| label | 标签 | `String` | - | | label | 输入框左侧文本 | `String` | - |
| value | 当前输入的值 | `String | Number` | - | | value | 当前输入的值 | `String | Number` | - |
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` | | type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
| border | 是否显示内边框 | `Boolean` | `true` | | border | 是否显示内边框 | `Boolean` | `true` |
@ -127,6 +127,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
| error | 是否将输入内容标红 | `Boolean` | `false` | | error | 是否将输入内容标红 | `Boolean` | `false` |
| error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` |
| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` |
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | | autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
| icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - | | icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - |

14
packages/vant-css/src/field.css
View File

@ -89,4 +89,18 @@
min-height: 60px; min-height: 60px;
} }
} }
&--label {
&-center {
.van-cell__title {
text-align: center;
}
}
&-right {
.van-cell__title {
text-align: right;
}
}
}
} }