github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix input relevant component box model to inline-block

pull/2053/head
baiyaaaaa 2016-12-28 18:33:45 +08:00 committed by cinwell.li
parent 10584b9624
commit d26288ea30
13 changed files with 89 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/en-US/date-picker.md
View File

@ -191,8 +191,7 @@ Picking a date range is supported.
<el-date-picker <el-date-picker
v-model="value6" v-model="value6"
type="daterange" type="daterange"
placeholder="Pick a range" placeholder="Pick a range">
style="width: 220px">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -202,8 +201,7 @@ Picking a date range is supported.
type="daterange" type="daterange"
align="right" align="right"
placeholder="Pick a range" placeholder="Pick a range"
:picker-options="pickerOptions2" :picker-options="pickerOptions2">
style="width: 220px">
</el-date-picker> </el-date-picker>
</div> </div>
</template> </template>

6
examples/docs/en-US/datetime-picker.md
View File

@ -147,8 +147,7 @@ Select date and time in one picker.
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
type="datetimerange" type="datetimerange"
placeholder="Select time range" placeholder="Select time range">
style="width:350px">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -158,8 +157,7 @@ Select date and time in one picker.
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
placeholder="Select time range" placeholder="Select time range"
align="right" align="right">
style="width:350px">
</el-date-picker> </el-date-picker>
</div> </div>
</template> </template>

8
examples/docs/en-US/form.md
View File

@ -219,7 +219,7 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
&:after,&:before { &:after, &:before {
content: ' '; content: ' ';
display: table; display: table;
} }
@ -263,18 +263,12 @@
.demo-ruleForm { .demo-ruleForm {
width: 480px; width: 480px;
.el-input,
.el-textarea {
width: auto;
}
.el-select .el-input { .el-select .el-input {
width: 360px; width: 360px;
} }
} }
.demo-dynamic { .demo-dynamic {
.el-input { .el-input {
display: inline-block;
margin-right: 10px; margin-right: 10px;
width: 270px; width: 270px;
vertical-align: top; vertical-align: top;

128
examples/docs/en-US/input.md
View File

@ -83,68 +83,57 @@
<style> <style>
.demo-input.demo-en-US { .demo-input.demo-en-US {
.el-select .el-input { .el-select .el-input {
width: 120px; width: 110px;
}
.text {
font-size: 14px;
color: #8492a6;
} }
.el-input { .el-input {
width: 180px; width: 180px;
& + .el-input,
& + .el-textarea {
margin-top: 15px;
}
} }
.el-textarea { .el-textarea {
width: 414px; width: 414px;
} }
.el-input-group { .el-input-group {
min-width: 260px; width: 100%;
} }
.el-input-group + .el-input-group { .demo-input-size {
margin-top: 15px; .el-input {
}
.el-autocomplete {
display: inline-block;
}
.inline-input {
&.el-input {
display: inline-block;
vertical-align: top; vertical-align: top;
margin: 10px 5px; margin: 0 10px 10px 0;
}
&.el-autocomplete {
display: inline-block;
margin: 10px 0 0;
} }
} }
.tac { .demo-autocomplete {
text-align: center; text-align: center;
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50);
}
.el-autocomplete { .el-autocomplete {
text-align: left; text-align: left;
} }
} }
.el-row.border-grid {
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50);
}
}
.my-autocomplete { .my-autocomplete {
li { li {
line-height: normal; line-height: normal;
padding: 7px *; padding: 7px *;
.value { .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.link { .addr {
font-size: 12px; font-size: 12px;
color: #b4b4b4; color: #b4b4b4;
} }
.highlighted .addr {
color: #ddd;
}
} }
} }
} }
@ -159,10 +148,7 @@ Input data using mouse or keyboard.
::: demo ::: demo
```html ```html
<el-input <el-input placeholder="Please input" v-model="input"></el-input>
placeholder="Please input"
v-model="input">
</el-input>
<script> <script>
export default { export default {
@ -263,26 +249,26 @@ Prepend or append an element, generally a label or a button.
::: demo Use `slot` to distribute elements that prepend or append to Input. ::: demo Use `slot` to distribute elements that prepend or append to Input.
```html ```html
<el-input placeholder="Please input" v-model="input3"> <div>
<template slot="prepend">Http://</template> <el-input placeholder="请输入内容" v-model="input3">
</el-input> <template slot="prepend">Http://</template>
<el-input placeholder="Please input" v-model="input4"> </el-input>
<template slot="append">.com</template> </div>
</el-input> <div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input5" style="width: 300px;"> <el-input placeholder="请输入内容" v-model="input4">
<el-select v-model="select" slot="prepend" placeholder="Select"> <template slot="append">.com</template>
<el-option label="Restaurant" value="1"></el-option> </el-input>
<el-option label="Order No." value="2"></el-option> </div>
<el-option label="Tel" value="3"></el-option> <div style="margin-top: 15px;">
</el-select> <el-input placeholder="请输入内容" v-model="input5">
<el-button slot="append" icon="search"></el-button> <el-select v-model="select" slot="prepend" placeholder="请选择">
</el-input> <el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<style> <el-option label="用户电话" value="3"></el-option>
.el-select .el-input { </el-select>
width: 120px; <el-button slot="append" icon="search"></el-button>
} </el-input>
</style> </div>
<script> <script>
export default { export default {
@ -303,28 +289,24 @@ export default {
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`. ::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
```html ```html
<div> <div class="demo-input-size">
<el-input <el-input
class="inline-input"
size="large" size="large"
placeholder="Please input" placeholder="请输入内容"
v-model="input6"> v-model="input6">
</el-input> </el-input>
<el-input <el-input
class="inline-input" placeholder="请输入内容"
placeholder="Please input"
v-model="input7"> v-model="input7">
</el-input> </el-input>
<el-input <el-input
class="inline-input"
size="small" size="small"
placeholder="Please input" placeholder="请输入内容"
v-model="input8"> v-model="input8">
</el-input> </el-input>
<el-input <el-input
class="inline-input"
size="mini" size="mini"
placeholder="Please input" placeholder="请输入内容"
v-model="input9"> v-model="input9">
</el-input> </el-input>
</div> </div>
@ -350,24 +332,24 @@ You can get some recommended tips based on the current input.
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready. ::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
```html ```html
<el-row class="border-grid"> <el-row class="demo-autocomplete">
<el-col :span="12" class="tac"> <el-col :span="12">
<div class="text">list suggestions when activated</div> <div class="sub-title">激活即列出输入建议</div>
<el-autocomplete <el-autocomplete
class="inline-input" class="inline-input"
v-model="state1" v-model="state1"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="Please input" placeholder="请输入内容"
@select="handleSelect" @select="handleSelect"
></el-autocomplete> ></el-autocomplete>
</el-col> </el-col>
<el-col :span="12" class="tac"> <el-col :span="12">
<div class="text">list suggestions on input</div> <div class="sub-title">输入后匹配输入建议</div>
<el-autocomplete <el-autocomplete
class="inline-input" class="inline-input"
v-model="state2" v-model="state2"
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
placeholder="Please input" placeholder="请输入内容"
:trigger-on-focus="false" :trigger-on-focus="false"
@select="handleSelect" @select="handleSelect"
></el-autocomplete> ></el-autocomplete>

6
examples/docs/zh-CN/date-picker.md
View File

@ -226,8 +226,7 @@
<el-date-picker <el-date-picker
v-model="value6" v-model="value6"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围">
style="width: 220px">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -237,8 +236,7 @@
type="daterange" type="daterange"
align="right" align="right"
placeholder="选择日期范围" placeholder="选择日期范围"
:picker-options="pickerOptions2" :picker-options="pickerOptions2">
style="width: 220px">
</el-date-picker> </el-date-picker>
</div> </div>
</template> </template>

6
examples/docs/zh-CN/datetime-picker.md
View File

@ -170,8 +170,7 @@
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
type="datetimerange" type="datetimerange"
placeholder="选择时间范围" placeholder="选择时间范围">
style="width:350px">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block"> <div class="block">
@ -181,8 +180,7 @@
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
placeholder="选择时间范围" placeholder="选择时间范围"
align="right" align="right">
style="width:350px">
</el-date-picker> </el-date-picker>
</div> </div>
</template> </template>

8
examples/docs/zh-CN/form.md
View File

@ -219,7 +219,7 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
&:after,&:before { &:after, &:before {
content: ' '; content: ' ';
display: table; display: table;
} }
@ -263,18 +263,12 @@
.demo-ruleForm { .demo-ruleForm {
width: 460px; width: 460px;
.el-input,
.el-textarea {
width: auto;
}
.el-select .el-input { .el-select .el-input {
width: 360px; width: 360px;
} }
} }
.demo-dynamic { .demo-dynamic {
.el-input { .el-input {
display: inline-block;
margin-right: 10px; margin-right: 10px;
width: 270px; width: 270px;
vertical-align: top; vertical-align: top;

7
examples/docs/zh-CN/input.md
View File

@ -133,7 +133,7 @@
width: 414px; width: 414px;
} }
.el-input-group { .el-input-group {
width: 260px; width: 100%;
} }
.demo-input-size { .demo-input-size {
.el-input { .el-input {
@ -188,8 +188,7 @@
::: demo ::: demo
```html ```html
<el-input v-model="input" placeholder="请输入内容"> <el-input v-model="input" placeholder="请输入内容"></el-input>
</el-input>
<script> <script>
export default { export default {
@ -298,7 +297,7 @@ export default {
</el-input> </el-input>
</div> </div>
<div style="margin-top: 15px;"> <div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;"> <el-input placeholder="请输入内容" v-model="input5">
<el-select v-model="select" slot="prepend" placeholder="请选择"> <el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option> <el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option> <el-option label="订单号" value="2"></el-option>

1
examples/docs/zh-CN/select.md
View File

@ -128,7 +128,6 @@
<style> <style>
.demo-select .el-select { .demo-select .el-select {
display: inline-block;
width: 240px; width: 240px;
} }
</style> </style>

1
packages/date-picker/src/picker.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<el-input <el-input
class="el-date-editor" class="el-date-editor"
:class="'el-date-editor--' + type"
:readonly="!editable || readonly" :readonly="!editable || readonly"
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"

16
packages/theme-default/src/date-picker/picker.css
View File

@ -6,6 +6,22 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
&.el-input {
width: 193px;
}
@m daterange {
&.el-input {
width: 220px;
}
}
@m datetimerange {
&.el-input {
width: 350px;
}
}
.el-picker-panel { .el-picker-panel {
position: absolute; position: absolute;
min-width: 180px; min-width: 180px;

3
packages/theme-default/src/input.css
View File

@ -6,6 +6,7 @@
position: relative; position: relative;
font-size: var(--font-size-base); font-size: var(--font-size-base);
display: inline-block; display: inline-block;
width: 100%;
@e inner { @e inner {
appearance: none; appearance: none;
@ -105,6 +106,7 @@
@b input-group { @b input-group {
line-height: normal; line-height: normal;
display: inline-table; display: inline-table;
width: 100%;
border-collapse: separate; border-collapse: separate;
& > .el-input__inner { & > .el-input__inner {
@ -170,6 +172,7 @@
@b textarea { @b textarea {
display: inline-block; display: inline-block;
width: 100%;
@e inner { @e inner {
display: block; display: block;

2
packages/theme-default/src/select.css
View File

@ -9,7 +9,7 @@
@component-namespace el { @component-namespace el {
@b select { @b select {
display: block; display: inline-block;
position: relative; position: relative;
&:hover { &:hover {