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
v-model="value6"
type="daterange"
placeholder="Pick a range"
style="width: 220px">
placeholder="Pick a range">
</el-date-picker>
</div>
<div class="block">
@ -202,8 +201,7 @@ Picking a date range is supported.
type="daterange"
align="right"
placeholder="Pick a range"
:picker-options="pickerOptions2"
style="width: 220px">
:picker-options="pickerOptions2">
</el-date-picker>
</div>
</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
v-model="value3"
type="datetimerange"
placeholder="Select time range"
style="width:350px">
placeholder="Select time range">
</el-date-picker>
</div>
<div class="block">
@ -158,8 +157,7 @@ Select date and time in one picker.
type="datetimerange"
:picker-options="pickerOptions2"
placeholder="Select time range"
align="right"
style="width:350px">
align="right">
</el-date-picker>
</div>
</template>

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

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

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

@ -83,68 +83,57 @@
<style>
.demo-input.demo-en-US {
.el-select .el-input {
width: 120px;
}
.text {
font-size: 14px;
color: #8492a6;
width: 110px;
}
.el-input {
width: 180px;
& + .el-input,
& + .el-textarea {
margin-top: 15px;
}
}
.el-textarea {
width: 414px;
}
.el-input-group {
min-width: 260px;
width: 100%;
}
.el-input-group + .el-input-group {
margin-top: 15px;
}
.el-autocomplete {
display: inline-block;
}
.inline-input {
&.el-input {
display: inline-block;
.demo-input-size {
.el-input {
vertical-align: top;
margin: 10px 5px;
}
&.el-autocomplete {
display: inline-block;
margin: 10px 0 0;
margin: 0 10px 10px 0;
}
}
.tac {
.demo-autocomplete {
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 {
text-align: left;
}
}
.el-row.border-grid {
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50);
}
}
.my-autocomplete {
li {
line-height: normal;
padding: 7px *;
.value {
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.link {
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
}
@ -159,10 +148,7 @@ Input data using mouse or keyboard.
::: demo
```html
<el-input
placeholder="Please input"
v-model="input">
</el-input>
<el-input placeholder="Please input" v-model="input"></el-input>
<script>
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.
```html
<el-input placeholder="Please input" v-model="input3">
<template slot="prepend">Http://</template>
</el-input>
<el-input placeholder="Please input" v-model="input4">
<template slot="append">.com</template>
</el-input>
<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
</el-input>
<style>
.el-select .el-input {
width: 120px;
}
</style>
<div>
<el-input placeholder="请输入内容" v-model="input3">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input4">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input5">
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
</el-input>
</div>
<script>
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`.
```html
<div>
<div class="demo-input-size">
<el-input
class="inline-input"
size="large"
placeholder="Please input"
placeholder="请输入内容"
v-model="input6">
</el-input>
<el-input
class="inline-input"
placeholder="Please input"
placeholder="请输入内容"
v-model="input7">
</el-input>
<el-input
class="inline-input"
size="small"
placeholder="Please input"
placeholder="请输入内容"
v-model="input8">
</el-input>
<el-input
class="inline-input"
size="mini"
placeholder="Please input"
placeholder="请输入内容"
v-model="input9">
</el-input>
</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.
```html
<el-row class="border-grid">
<el-col :span="12" class="tac">
<div class="text">list suggestions when activated</div>
<el-row class="demo-autocomplete">
<el-col :span="12">
<div class="sub-title">激活即列出输入建议</div>
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="Please input"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
</el-col>
<el-col :span="12" class="tac">
<div class="text">list suggestions on input</div>
<el-col :span="12">
<div class="sub-title">输入后匹配输入建议</div>
<el-autocomplete
class="inline-input"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="Please input"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>

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

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

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

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

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

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

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

@ -133,7 +133,7 @@
width: 414px;
}
.el-input-group {
width: 260px;
width: 100%;
}
.demo-input-size {
.el-input {
@ -188,8 +188,7 @@
::: demo
```html
<el-input v-model="input" placeholder="请输入内容">
</el-input>
<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
@ -298,7 +297,7 @@ export default {
</el-input>
</div>
<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-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>

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

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

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

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

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

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

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

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

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

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