blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +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; const { labelWidth } = this;
if (labelWidth) { if (labelWidth) {
const width = isNumber(String(labelWidth)) ? `${labelWidth}px` : labelWidth; const width = isNumber(String(labelWidth)) ? `${labelWidth}px` : labelWidth;
return { return { width };
maxWidth: width,
minWidth: width
};
} }
} }
}, },

3
packages/field/index.less
View File

@ -2,7 +2,8 @@
.van-field { .van-field {
&__label { &__label {
max-width: @field-label-max-width; flex: none;
width: @field-label-width;
&--center { &--center {
text-align: 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`] = ` exports[`label-width prop with unit 1`] = `
<div class="van-cell van-field"> <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-cell__value">
<div class="van-field__body"><input type="text" class="van-field__control"></div> <div class="van-field__body"><input type="text" class="van-field__control"></div>
</div> </div>
@ -28,7 +28,7 @@ exports[`label-width prop with unit 1`] = `
exports[`label-width prop without unit 1`] = ` exports[`label-width prop without unit 1`] = `
<div class="van-cell van-field"> <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-cell__value">
<div class="van-field__body"><input type="text" class="van-field__control"></div> <div class="van-field__body"><input type="text" class="van-field__control"></div>
</div> </div>

2
packages/style/var.less
View File

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