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

[improvement] Field: optimize label width

Browse Source
This commit is contained in:
陈嘉涵 2019-04-30 16:23:02 +08:00
parent 3fbd94f345
commit dd32efd5a4
4 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/field/index.js
View File

@ -67,10 +67,7 @@ export default sfc({
const { labelWidth } = this;
if (labelWidth) {
const width = isNumber(String(labelWidth)) ? `${labelWidth}px` : labelWidth;
return {
maxWidth: width,
minWidth: width
};
return { width };
}
}
},

3
packages/field/index.less
View File

@ -2,7 +2,8 @@
.van-field {
&__label {
max-width: @field-label-max-width;
flex: none;
width: @field-label-width;
&--center {
text-align: center;

4
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -19,7 +19,7 @@ exports[`clearable 2`] = `
exports[`label-width prop with unit 1`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label" style="max-width: 10rem; min-width: 10rem;"><span>Label</span></div>
<div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" class="van-field__control"></div>
</div>
@ -28,7 +28,7 @@ exports[`label-width prop with unit 1`] = `
exports[`label-width prop without unit 1`] = `
<div class="van-cell van-field">
<div class="van-cell__title van-field__label" style="max-width: 100px; min-width: 100px;"><span>Label</span></div>
<div class="van-cell__title van-field__label" style="width: 100px;"><span>Label</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" class="van-field__control"></div>
</div>

2
packages/style/var.less
View File

@ -150,7 +150,7 @@
@dialog-confirm-button-text-color: @blue;
// Field
@field-label-max-width: 90px;
@field-label-width: 90px;
@field-input-text-color: @text-color;
@field-input-error-text-color: @red;
@field-input-disabled-text-color: @gray-dark;