mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 20:28:52 +08:00
Switch: add chalk theme
This commit is contained in:
Leopoldthecoder
杨奕
parent
2df521482b
commit
11827f222f
@ -12,8 +12,11 @@
|
||||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: '100',
|
||||
value4: true
|
||||
value3: true,
|
||||
value4: true,
|
||||
value5: '100',
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -24,14 +27,10 @@
|
||||
Switch is used for switching between two opposing states.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
|
||||
:::demo Bind `v-model` to a `Boolean` typed variable. The `on-color` and `off-color` attribute decides the background color in two states.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
on-text=""
|
||||
off-text="">
|
||||
<el-switch v-model="value1">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
@ -52,14 +51,45 @@ Switch is used for switching between two opposing states.
|
||||
```
|
||||
:::
|
||||
|
||||
### Text description
|
||||
:::demo You can add `on-text` and `off-text` attribute to show texts.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-text="Pay by month"
|
||||
off-text="Pay by year">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-text="Pay by month"
|
||||
off-text="Pay by year">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Extended value types
|
||||
|
||||
:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value3" placement="top">
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value5"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-value="100"
|
||||
@ -71,7 +101,7 @@ Switch is used for switching between two opposing states.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '100'
|
||||
value5: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -86,13 +116,11 @@ Switch is used for switching between two opposing states.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
on-text=""
|
||||
off-text=""
|
||||
v-model="value6"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
v-model="value7"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
@ -100,7 +128,8 @@ Switch is used for switching between two opposing states.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: true
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -113,11 +142,11 @@ Switch is used for switching between two opposing states.
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----|----
|
||||
disabled | whether Switch is disabled | boolean | — | false
|
||||
width | width of Switch | number | — | 58 (with text) / 46 (no text)
|
||||
width | width of Switch | number | — | 40
|
||||
on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
|
||||
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
|
||||
on-text | text displayed when in `on` state | string | — | ON
|
||||
off-text | text displayed when in `off` state | string | — | OFF
|
||||
on-text | text displayed when in `on` state | string | — | —
|
||||
off-text | text displayed when in `off` state | string | — | —
|
||||
on-value | switch value when in `on` state | boolean / string / number | — | true
|
||||
off-value | switch value when in `off` state | boolean / string / number | — | false
|
||||
on-color | background color when in `on` state | string | — | #20A0FF
|
||||
|
||||
@ -12,8 +12,11 @@
|
||||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: '100',
|
||||
value4: true
|
||||
value3: true,
|
||||
value4: true,
|
||||
value5: '100',
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -25,13 +28,10 @@
|
||||
|
||||
### 基本用法
|
||||
|
||||
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
|
||||
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-color`属性与`off-color`属性来设置开关的背景色。
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
on-text=""
|
||||
off-text="">
|
||||
<el-switch v-model="value1">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
@ -52,14 +52,46 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 文字描述
|
||||
|
||||
:::demo 使用`on-text`属性与`off-text`属性来设置开关的文字描述。
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-text="按月付费"
|
||||
off-text="按年付费">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-text="按月付费"
|
||||
off-text="按年付费">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 扩展的 value 类型
|
||||
|
||||
:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value3" placement="top">
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
v-model="value5"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949"
|
||||
on-value="100"
|
||||
@ -71,7 +103,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '100'
|
||||
value5: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -87,20 +119,19 @@
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
on-text=""
|
||||
off-text=""
|
||||
v-model="value6"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value4"
|
||||
v-model="value7"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: true
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -114,11 +145,11 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| width | switch 的宽度（像素） | number | — | 58（有文字）/ 46（无文字） |
|
||||
| width | switch 的宽度（像素） | number | — | 40 |
|
||||
| on-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `on-text` | string | — | — |
|
||||
| off-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text` | string | — | — |
|
||||
| on-text | switch 打开时的文字 | string | — | ON |
|
||||
| off-text | switch 关闭时的文字 | string | — | OFF |
|
||||
| on-text | switch 打开时的文字描述 | string | — | — |
|
||||
| off-text | switch 关闭时的文字描述 | string | — | — |
|
||||
| on-value | switch 打开时的值 | boolean / string / number | — | true |
|
||||
| off-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'is-checked': checked }">
|
||||
<div class="el-switch__mask" v-show="disabled"></div>
|
||||
<label class="el-switch" :class="{ 'is-disabled': disabled, 'is-checked': checked }">
|
||||
<input
|
||||
class="el-switch__input"
|
||||
type="checkbox"
|
||||
@ -10,27 +9,21 @@
|
||||
:true-value="onValue"
|
||||
:false-value="offValue"
|
||||
:disabled="disabled">
|
||||
<span
|
||||
:class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
|
||||
v-if="offIconClass || offText">
|
||||
<i :class="[offIconClass]" v-if="offIconClass"></i>
|
||||
<span v-if="!offIconClass && offText">{{ offText }}</span>
|
||||
</span>
|
||||
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
|
||||
<span class="el-switch__button" :style="{ transform }"></span>
|
||||
</span>
|
||||
<transition name="label-fade">
|
||||
<div
|
||||
class="el-switch__label el-switch__label--left"
|
||||
v-show="checked"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[onIconClass]" v-if="onIconClass"></i>
|
||||
<span v-if="!onIconClass && onText">{{ onText }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="label-fade">
|
||||
<div
|
||||
class="el-switch__label el-switch__label--right"
|
||||
v-show="!checked"
|
||||
:style="{ 'width': coreWidth + 'px' }">
|
||||
<i :class="[offIconClass]" v-if="offIconClass"></i>
|
||||
<span v-if="!offIconClass && offText">{{ offText }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<span
|
||||
:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
|
||||
v-if="onIconClass || onText">
|
||||
<i :class="[onIconClass]" v-if="onIconClass"></i>
|
||||
<span v-if="!onIconClass && onText">{{ onText }}</span>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@ -58,14 +51,8 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
onText: {
|
||||
type: String,
|
||||
default: 'ON'
|
||||
},
|
||||
offText: {
|
||||
type: String,
|
||||
default: 'OFF'
|
||||
},
|
||||
onText: String,
|
||||
offText: String,
|
||||
onColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -101,12 +88,8 @@
|
||||
checked() {
|
||||
return this.value === this.onValue;
|
||||
},
|
||||
hasText() {
|
||||
/* istanbul ignore next */
|
||||
return this.onText || this.offText;
|
||||
},
|
||||
transform() {
|
||||
return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
|
||||
return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -135,9 +118,7 @@
|
||||
},
|
||||
mounted() {
|
||||
/* istanbul ignore if */
|
||||
if (this.width === 0) {
|
||||
this.coreWidth = this.hasText ? 58 : 46;
|
||||
}
|
||||
this.coreWidth = this.width || 40;
|
||||
if (this.onColor || this.offColor) {
|
||||
this.setBackgroundColor();
|
||||
}
|
||||
|
||||
@ -435,14 +435,14 @@ $--cascader-height: 200px;
|
||||
/* Switch
|
||||
-------------------------- */
|
||||
$--switch-on-color: $--color-primary;
|
||||
$--switch-off-color: $--color-text-placeholder;
|
||||
$--switch-disabled-color: $--color-text-secondary;
|
||||
$--switch-off-color: $--border-color-base;
|
||||
$--switch-disabled-color: $--border-color-lighter;
|
||||
$--switch-disabled-text-color: $--color-text-placeholder;
|
||||
|
||||
$--switch-font-size: $--font-size-base;
|
||||
$--switch-core-border-radius: 12px;
|
||||
$--switch-width: 46px;
|
||||
$--switch-height: 22px;
|
||||
$--switch-core-border-radius: 10px;
|
||||
$--switch-width: 40px;
|
||||
$--switch-height: 20px;
|
||||
$--switch-button-size: 16px;
|
||||
|
||||
/* Dialog
|
||||
|
||||
@ -17,31 +17,28 @@
|
||||
|
||||
@include e(label) {
|
||||
transition: .2s;
|
||||
position: absolute;
|
||||
width: $--switch-width;
|
||||
height: $--switch-height;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
font-size: $--switch-font-size;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
color: $--color-text-primary;
|
||||
|
||||
@include when(active) {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
@include m(left) {
|
||||
i {
|
||||
left: 6px;
|
||||
}
|
||||
margin-right: 10px;
|
||||
}
|
||||
@include m(right) {
|
||||
i {
|
||||
right: 6px;
|
||||
}
|
||||
margin-left: 10px;
|
||||
}
|
||||
& * {
|
||||
line-height: 1;
|
||||
top: 4px;
|
||||
position: absolute;
|
||||
font-size: $--switch-font-size;
|
||||
display: inline-block;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,11 +59,12 @@
|
||||
background: $--switch-off-color;
|
||||
cursor: pointer;
|
||||
transition: border-color .3s, background-color .3s;
|
||||
vertical-align: middle;
|
||||
|
||||
& .el-switch__button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
border-radius: $--border-radius-circle;
|
||||
transition: transform .3s;
|
||||
width: $--switch-button-size;
|
||||
@ -86,14 +84,10 @@
|
||||
.el-switch__core {
|
||||
border-color: $--switch-disabled-color !important;
|
||||
background: $--switch-disabled-color !important;
|
||||
}
|
||||
|
||||
& span {
|
||||
background-color: $--switch-disabled-text-color !important;
|
||||
}
|
||||
|
||||
& ~ .el-switch__label * {
|
||||
color: $--switch-disabled-text-color !important;
|
||||
}
|
||||
.el-switch__label * {
|
||||
color: $--switch-disabled-text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ describe('Switch', () => {
|
||||
const core = vm.$el.querySelector('.el-switch__core');
|
||||
expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');
|
||||
expect(core.style.width).to.equal('100px');
|
||||
expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('on');
|
||||
expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('off');
|
||||
});
|
||||
|
||||
it('switch with icons', () => {
|
||||
@ -30,7 +30,7 @@ describe('Switch', () => {
|
||||
});
|
||||
|
||||
const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
|
||||
expect(icon.classList.contains('el-icon-check')).to.true;
|
||||
expect(icon.classList.contains('el-icon-close')).to.true;
|
||||
});
|
||||
|
||||
it('value correctly update', done => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user