Skip to content

E
Element
Commit dda21ce9 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Input / Input Number: add chalk theme (#7178) 

* Input / Input Number: add chalk theme

* Update Input Number doc
parent 9bae0160
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 101 deletions
examples/docs/en-US/input-number.md
View file @ dda21ce9
......@@ -99,15 +99,16 @@ Allows you to define incremental steps.
### Size
Additional `large` and `small` sizes of the input box are available
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo
```html
<template>
<el-input-number size="large" v-model="num4"></el-input-number>
<el-input-number v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
</template>
<script>
export default {
......@@ -115,7 +116,32 @@ Additional `large` and `small` sizes of the input box are available
return {
num4: 1,
num5: 1,
num6: 1
num6: 1,
num7: 1
}
}
};
</script>
```
:::
### Controls Position
:::demo Set `controls-position` to decide controls position
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
......@@ -135,6 +161,7 @@ Additional `large` and `small` sizes of the input box are available
|disabled| whether the component is disabled | boolean | — | false |
|controls| whether to enable the control buttons | boolean | — | true |
|debounce| debounce delay when typing, in millisecond | number | — | 300 |
|controls-position | position of the control buttons | string | right | - |
|name | same as `name` in native input | string | — | — |
### Events
......
examples/docs/en-US/input.md
View file @ dda21ce9
......@@ -88,7 +88,7 @@
<style>
.demo-input.demo-en-US {
.el-select .el-input {
width: 110px;
width: 130px;
}
.el-input {
width: 180px;
......@@ -105,6 +105,16 @@
margin: 0 10px 10px 0;
}
}
.demo-input-suffix {
padding: 10px;
}
.demo-input-suffix .el-input {
margin-right: 15px;
}
.demo-input-label {
display: inline-block;
width: 130px;
}
.demo-autocomplete {
text-align: center;
......@@ -196,7 +206,7 @@ Add an icon to indicate input type.
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
```html
<div class="demo-input-suffix">
Using attributes
<span class="demo-input-label">Using attributes</span>
<el-input
placeholder="Pick a date"
suffix-icon="el-icon-date"
......@@ -209,7 +219,7 @@ Add an icon to indicate input type.
</el-input>
</div>
<div class="demo-input-suffix">
Using slots
<span class="demo-input-label">Using slots</span>
<el-input
placeholder="Pick a date"
v-model="input22">
......@@ -222,6 +232,13 @@ Add an icon to indicate input type.
</el-input>
</div>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
</style>
<script>
export default {
data() {
......
examples/docs/zh-CN/input-number.md
View file @ dda21ce9
......@@ -7,7 +7,9 @@
num3: 5,
num4: 1,
num5: 1,
num6: 1
num6: 1,
num7: 1,
num8: 1
}
},
methods: {
......@@ -97,15 +99,16 @@
### 尺寸
额外提供了 `large`、`small` 两种尺寸的数字输入框
额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框
:::demo
```html
<template>
<el-input-number size="large" v-model="num4"></el-input-number>
<el-input-number v-model="num5"></el-input-number>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
</template>
<script>
export default {
......@@ -113,7 +116,32 @@
return {
num4: 1,
num5: 1,
num6: 1
num6: 1,
num7: 1
}
}
};
</script>
```
:::
### 按钮位置
:::demo 设置 `controls-position` 属性可以控制按钮位置。
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
......@@ -132,6 +160,7 @@
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
| debounce | 输入时的去抖延迟，毫秒 | number | — | 300 |
| controls-position | 控制按钮位置 | string | right | - |
| name | 原生属性 | string | — | — |
### Events
......
examples/docs/zh-CN/input.md
View file @ dda21ce9
......@@ -129,7 +129,7 @@
<style>
.demo-input.demo-zh-CN {
.el-select .el-input {
width: 110px;
width: 130px;
}
.el-input {
width: 180px;
......@@ -369,7 +369,7 @@ export default {
</div>
<style>
.el-select .el-input {
width: 110px;
width: 130px;
}
</style>
<script>
......
packages/autocomplete/src/autocomplete-suggestions.vue
View file @ dda21ce9
......@@ -2,7 +2,7 @@
<transition name="el-zoom-in-top" @after-leave="doDestroy">
<div
v-show="showPopper"
class="el-autocomplete-suggestion"
class="el-autocomplete-suggestion el-popper"
:class="{ 'is-loading': parent.loading }"
:style="{ width: dropdownWidth }"
>
......
packages/autocomplete/src/autocomplete.vue
View file @ dda21ce9
......@@ -23,6 +23,7 @@
</el-input>
<el-autocomplete-suggestions
:props="props"
visible-arrow
:class="[popperClass ? popperClass : '']"
ref="suggestions"
:suggestions="suggestions"
......
packages/input-number/src/input-number.vue
View file @ dda21ce9
......@@ -3,7 +3,8 @@
:class="[
size ? 'el-input-number--' + size : '',
{ 'is-disabled': disabled },
{ 'is-without-controls': !controls}
{ 'is-without-controls': !controls },
{ 'is-controls-right': controlsAtRight }
]"
>
<span
......@@ -12,7 +13,7 @@
:class="{'is-disabled': minDisabled}"
v-repeat-click="decrease"
>
<i class="el-icon-minus"></i>
<i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
</span>
<span
v-if="controls"
......@@ -20,7 +21,7 @@
:class="{'is-disabled': maxDisabled}"
v-repeat-click="increase"
>
<i class="el-icon-plus"></i>
<i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
</span>
<el-input
:value="currentValue"
......@@ -102,6 +103,10 @@
type: Boolean,
default: true
},
controlsPosition: {
type: String,
default: ''
},
debounce: {
type: Number,
default: 300
......@@ -136,6 +141,9 @@
precision() {
const { value, step, getPrecision } = this;
return Math.max(getPrecision(value), getPrecision(step));
},
controlsAtRight() {
return this.controlsPosition === 'right';
}
},
methods: {
......
packages/select/src/select.vue
View file @ dda21ce9
<template>
<div
class="el-select"
:class="[size ? 'el-select--' + size : '']"
v-clickoutside="handleClose">
<div
class="el-select__tags"
......@@ -114,9 +115,9 @@
import NavigationMixin from './navigation-mixin';
const sizeMap = {
'large': 42,
'small': 30,
'mini': 22
'medium': 36,
'small': 32,
'mini': 28
};
const valueEquals = (a, b) => {
......@@ -521,7 +522,7 @@
if (!this.$refs.reference) return;
let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 40) + 'px';
if (this.visible && this.emptyText !== false) {
this.broadcast('ElSelectDropdown', 'updatePopper');
}
......
packages/theme-chalk/src/autocomplete.scss
View file @ dda21ce9
......@@ -11,16 +11,20 @@
@include b(autocomplete-suggestion) {
margin: 5px 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
box-shadow: $--box-shadow-light;
&.el-popper .popper__arrow {
left: 24px !important;
}
@include e(wrap) {
max-height: 280px;
overflow: auto;
background-color: $--color-white;
border: 1px solid $--color-black;
padding: 6px 0;
border-radius: 2px;
box-sizing: border-box;
overflow: auto;
background-color: $--color-white;
border: 1px solid $--border-color-light;
border-radius: $--border-radius-base;
}
@include e(list) {
......@@ -29,13 +33,13 @@
}
& li {
list-style: none;
line-height: 36px;
padding: 0 10px;
padding: 0 20px;
margin: 0;
line-height: 33px;
cursor: pointer;
color: $--color-black;
font-size: 14px;
color: $--color-text-regular;
font-size: $--font-size-base;
list-style: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -43,17 +47,21 @@
&:hover {
background-color: $--select-option-hover-background;
}
&.highlighted {
background-color: $--color-primary;
color: $--color-white;
color: $--color-primary;
}
&:active {
background-color: darken($--color-primary, 0.2);
background-color: $--color-primary;
color: $--color-white;
}
&.divider {
margin-top: 6px;
border-top: 1px solid $--color-black;
}
&.divider:last-child {
margin-bottom: -6px;
}
......
packages/theme-chalk/src/cascader.scss
View file @ dda21ce9
......@@ -5,7 +5,7 @@
@include b(cascader) {
display: inline-block;
position: relative;
min-width: 224px;
font-size: $--font-size-base;
.el-input,
.el-input__inner {
......@@ -43,8 +43,8 @@
left: 0;
top: 0;
height: 100%;
line-height: 36px;
padding: 0 25px 0 10px;
line-height: 40px;
padding: 0 25px 0 15px;
color: $--input-color;
width: 100%;
white-space: nowrap;
......@@ -52,8 +52,8 @@
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
font-size: $--font-size-small;
text-align: left;
font-size: inherit;
span {
color: $--color-black;
......@@ -63,17 +63,27 @@
@include m(medium) {
font-size: $--input-medium-font-size;
.el-cascader__label {
line-height: #{$--input-medium-height - 2};
@include e(label) {
line-height: #{$--input-medium-height };
}
}
@include m(small) {
font-size: $--input-small-font-size;
.el-cascader__label {
line-height: #{$--input-small-height - 2};
@include e(label) {
line-height: #{$--input-small-height };
}
}
@include m(mini) {
font-size: $--input-mini-font-size;
@include e(label) {
line-height: #{$--input-mini-height};
}
}
@include when(disabled) {
.el-cascader__label {
z-index: #{$--index-normal + 1};
......@@ -92,8 +102,8 @@
border-radius: $--border-radius-small;
box-shadow: $--select-dropdown-shadow;
&.el-popper .popper__arrow {
left: 24px !important;
.popper__arrow {
transform: translateX(-400%);
}
}
......
packages/theme-chalk/src/common/var.scss
View file @ dda21ce9
......@@ -98,7 +98,7 @@ $--index-popper: 2000;
/* Disable base
-------------------------- */
$--disabled-fill-base: $--border-color-extra-light;
$--disabled-fill-base: $--background-color-base;
$--disabled-color-base: $--color-text-placeholder;
$--disabled-border-base: $--border-color-lighter;
......@@ -612,6 +612,7 @@ $--datepicker-inrange-color: $--border-color-extra-light;
$--datepicker-inrange-hover-color: $--border-color-extra-light;
$--datepicker-active-color: $--color-primary;
$--datepicker-text-hover-color: $--color-primary;
$--datepicker-cell-hover-color: #fff;
/* Loading
--------------------------*/
......
packages/theme-chalk/src/dropdown.scss
View file @ dda21ce9
......@@ -18,6 +18,24 @@
& .el-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
position: relative;
border-left: none;
&::before {
$gap: 5px;
content: '';
position: absolute;
display: block;
width: 1px;
top: $gap;
bottom: $gap;
left: 0;
background: mix(white, transparent, 50%);
}
&:hover {
}
& .el-dropdown__icon {
padding-left: 0;
......
packages/theme-chalk/src/input-number.scss
View file @ dda21ce9
......@@ -3,28 +3,32 @@
@import "input";
@include b(input-number) {
position: relative;
display: inline-block;
width: 180px;
position: relative;
& .el-input {
.el-input {
display: block;
&__inner {
-webkit-appearance: none;
padding-left: #{$--input-height + 10};
padding-right: #{$--input-height + 10};
}
}
& .el-input__inner {
appearance: none;
padding-right: #{$--input-height * 2 + 10};
}
@include e((increase, decrease)) {
height: auto;
border-left: $--border-base;
position: absolute;
z-index: 1;
top: 1px;
width: $--input-height;
height: auto;
line-height: #{$--input-height - 2};
top: 1px;
text-align: center;
color: $--color-black;
background: $--background-color-base;
color: $--color-text-regular;
cursor: pointer;
position: absolute;
z-index: 1;
font-size: 13px;
&:hover {
color: $--color-primary;
......@@ -34,21 +38,26 @@
}
}
@include when(disabled) {
color: $--disabled-border-base;
&.is-disabled {
color: $--disabled-color-base;
cursor: not-allowed;
}
}
@include e(increase) {
right: 0;
right: 1px;
border-radius: 0 $--border-radius-base $--border-radius-base 0;
border-left: $--border-base;
}
@include e(decrease) {
right: #{$--input-height + 1};
left: 1px;
border-radius: $--border-radius-base 0 0 $--border-radius-base;
border-right: $--border-base;
}
@include when(disabled) {
& .el-input-number__increase, .el-input-number__decrease {
@include e((increase, decrease)) {
border-color: $--disabled-border-base;
color: $--disabled-border-base;
......@@ -58,39 +67,112 @@
}
}
}
@include m(medium) {
width: 200px;
& .el-input-number__increase, .el-input-number__decrease {
@include e((increase, decrease)) {
line-height: #{$--input-medium-height - 2};
width: $--input-medium-height;
font-size: $--input-medium-font-size;
}
& .el-input-number__decrease {
right: #{$--input-medium-height + 1};
}
& .el-input__inner {
padding-right: #{$--input-medium-height * 2 + 10};
.el-input__inner {
padding-left: #{$--input-medium-height + 7};
padding-right: #{$--input-medium-height + 7};
}
}
@include m(small) {
width: 130px;
& .el-input-number__increase, .el-input-number__decrease {
@include e((increase, decrease)) {
line-height: #{$--input-small-height - 2};
width: $--input-small-height;
font-size: $--input-small-font-size;
[class*=el-icon] {
transform: scale(.9);
}
}
& .el-input-number__decrease {
right: #{$--input-small-height + 1};
.el-input__inner {
padding-left: #{$--input-small-height + 7};
padding-right: #{$--input-small-height + 7};
}
}
@include m(mini) {
width: 130px;
@include e((increase, decrease)) {
line-height: #{$--input-mini-height - 2};
width: $--input-mini-height;
font-size: $--input-mini-font-size;
[class*=el-icon] {
transform: scale(.8);
}
}
& .el-input__inner {
padding-right: #{$--input-small-height * 2 + 10};
.el-input__inner {
padding-left: #{$--input-mini-height + 7};
padding-right: #{$--input-mini-height + 7};
}
}
@include when(without-controls) {
& .el-input__inner {
padding-right: 10px;
.el-input__inner {
padding-right: 15px;
}
}
@include when(controls-right) {
.el-input__inner {
padding-left: 15px;
padding-right: #{$--input-height + 10};
}
@include e((increase, decrease)) {
height: auto;
line-height: #{($--input-height - 2) / 2};
[class*=el-icon] {
transform: scale(.8);
}
}
@include e(increase) {
border-radius: 0 $--border-radius-base 0 0;
border-bottom: $--border-base;
}
@include e(decrease) {
right: 1px;
bottom: 1px;
top: auto;
left: auto;
border-right: none;
border-left: $--border-base;
border-radius: 0 0 $--border-radius-base 0;
}
&[class*=medium] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-medium-height - 2) / 2};
}
}
&[class*=small] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-small-height - 2) / 2};
}
}
&[class*=mini] {
[class*=increase], [class*=decrease] {
line-height: #{($--input-mini-height - 2) / 2};
}
}
}
}
packages/theme-chalk/src/input.scss
View file @ dda21ce9
......@@ -20,7 +20,7 @@
height: $--input-height;
line-height: 1;
outline: none;
padding: 3px 10px;
padding: 0 15px;
transition: $--border-transition-base;
width: 100%;
text-align: inherit;
......@@ -49,6 +49,7 @@
transition: all .3s;
pointer-events: none;
}
@include e(suffix-inner) {
pointer-events: all;
}
......@@ -105,34 +106,37 @@
cursor: not-allowed;
}
}
@include m(suffix) {
.el-input__inner {
padding-right: 30px;
}
}
@include m(prefix) {
.el-input__inner {
padding-left: 30px;
}
}
@include m(medium) {
font-size: $--input-medium-font-size;
& .el-input__inner {
@include e(inner) {
height: $--input-medium-height;
}
}
@include m(small) {
font-size: $--input-small-font-size;
& .el-input__inner {
@include e(inner) {
height: $--input-small-height;
}
}
@include m(mini) {
font-size: $--input-mini-font-size;
& .el-input__inner {
@include e(inner) {
height: $--input-mini-height;
}
}
......@@ -144,47 +148,51 @@
width: 100%;
border-collapse: separate;
& > .el-input__inner {
> .el-input__inner {
vertical-align: middle;
display: table-cell;
}
@include e((append, prepend)) {
background-color: $--color-black;
color: $--color-black;
background-color: $--background-color-base;
color: $--color-info;
vertical-align: middle;
display: table-cell;
position: relative;
border: $--border-base;
border-radius: $--input-border-radius;
padding: 0 10px;
padding: 0 20px;
width: 1px;
white-space: nowrap;
& .el-select,
& .el-button {
.el-select,
.el-button {
display: block;
margin: -10px;
margin: -20px;
}
& button.el-button,
& div.el-select .el-input__inner,
& div.el-select:hover .el-input__inner {
button.el-button,
div.el-select .el-input__inner,
div.el-select:hover .el-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
& .el-button,
& .el-input {
.el-button,
.el-input {
font-size: inherit;
}
}
@include e(prepend) {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@include e(append) {
border-left: 0;
border-top-left-radius: 0;
......@@ -197,6 +205,7 @@
border-bottom-left-radius: 0;
}
}
@include m(append) {
.el-input__inner {
border-top-right-radius: 0;
......
packages/theme-chalk/src/select-dropdown.scss
View file @ dda21ce9
......@@ -36,8 +36,8 @@
padding: 0;
}
& .popper__arrow {
left: 24px !important;
.popper__arrow {
transform: translateX(-400%);
}
}
......
packages/theme-chalk/src/select.scss
View file @ dda21ce9
......@@ -10,7 +10,6 @@
@include b(select) {
display: inline-block;
position: relative;
min-width: 224px;
&:hover {
.el-input__inner {
......@@ -18,7 +17,7 @@
}
}
& .el-input__inner {
.el-input__inner {
cursor: pointer;
padding-right: 35px;
......@@ -27,7 +26,7 @@
}
}
& .el-input {
.el-input {
& .el-select__caret {
color: $--select-input-color;
font-size: $--select-input-font-size;
......@@ -65,7 +64,7 @@
}
}
& > .el-input {
> .el-input {
display: block;
}
......@@ -109,11 +108,11 @@
transform: translateY(-50%);
}
& .el-tag__close {
.el-tag__close {
margin-top: -2px;
}
& .el-tag {
.el-tag {
height: $--select-tag-height;
line-height: $--select-tag-height;
box-sizing: border-box;
......
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