Skip to content

E
Element
Commit f1b8909e authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li
Browse files
Options

remove labelWidth when labelPosition is 'top' (#2417)

parent d65ecbc7
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 180 deletions
examples/docs/en-US/form.md
View file @ f1b8909e
......@@ -51,18 +51,8 @@
user: '',
region: ''
},
formStacked: {
name: '',
region: '',
type: '',
remark: ''
},
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
......@@ -221,13 +211,6 @@
margin-right: 10px;
}
}
.demo-form-stacked {
width: 270px;
.el-select .el-input {
width: 100%;
}
}
.demo-ruleForm {
width: 480px;
......@@ -372,91 +355,32 @@ When the vertical space is limited and the form is relatively simple, you can pu
Depending on your design, there are several different ways to align your label element.
#### Top
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
```html
<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button>
<el-radio-button label="right">Right</el-radio-button>
<el-radio-button label="top">Top</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
<el-form-item label="Name">
<el-input v-model="formStacked.name"></el-input>
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formStacked.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formStacked: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
#### Right
:::demo When `label-position` is omitted, labels will align to the right
```html
<el-form :model="formAlignRight" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="Promote area">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="Form of activity">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
#### Left
:::demo When `label-position` is set to `top`, labels will align to the left.
```html
<el-form :model="formAlignLeft" label-position="left" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="Promotion area">
<el-input v-model="formAlignLeft.region"></el-input>
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formAlignLeft.type"></el-input>
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignLeft: {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
......@@ -466,7 +390,6 @@ Depending on your design, there are several different ways to align your label e
}
</script>
```
:::
### Validation
......
examples/docs/zh-CN/form.md
View file @ f1b8909e
......@@ -51,18 +51,8 @@
user: '',
region: ''
},
formStacked: {
name: '',
region: '',
type: '',
remark: ''
},
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
......@@ -216,13 +206,6 @@
margin-right: 10px;
}
}
.demo-form-stacked {
width: 270px;
.el-select .el-input {
width: 100%;
}
}
.demo-ruleForm {
width: 460px;
......@@ -365,88 +348,31 @@
根据具体目标和制约因素，选择最佳的标签对齐方式。
顶部对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
```html
<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
<el-form-item label="名称">
<el-input v-model="formStacked.name"></el-input>
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-input v-model="formStacked.region"></el-input>
</el-form-item>
<el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formStacked: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
右对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
```html
<el-form :model="formAlignRight" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
左对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
```html
<el-form :model="formAlignLeft" label-position="left" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-input v-model="formAlignLeft.region"></el-input>
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input>
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignLeft: {
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
......
packages/form/src/form-item.vue
View file @ f1b8909e
......@@ -4,7 +4,7 @@
'is-validating': validateState === 'validating',
'is-required': isRequired || required
}">
<label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
<label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
{{label + form.labelSuffix}}
</label>
<div class="el-form-item__content" v-bind:style="contentStyle">
......@@ -76,6 +76,7 @@
computed: {
labelStyle() {
var ret = {};
if (this.form.labelPosition === 'top') return ret;
var labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) {
ret.width = labelWidth;
......@@ -84,6 +85,7 @@
},
contentStyle() {
var ret = {};
if (this.form.labelPosition === 'top') return ret;
var labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) {
ret.marginLeft = labelWidth;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment