blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Switch: add active-color prop (#2013)

Browse Source
This commit is contained in:
neverland 2018-11-01 19:56:09 +08:00 committed by GitHub
parent af168d6abc
commit 42f985cd7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch" style="font-size:26px;">
<div title="设为默认收货地址" class="van-switch" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>

2
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -203,7 +203,7 @@ exports[`create a AddressEdit with props 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;">
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>

6
packages/switch-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;">
<div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>

8
packages/switch/demo/index.vue
View File

@ -13,7 +13,13 @@
</demo-block>
<demo-block :title="$t('advancedUsage')">
<van-switch :value="checked2" size="36px" @input="onInput" />
<van-switch
:value="checked2"
size="36px"
active-color="#4b0"
inactive-color="#f44"
@input="onInput"
/>
</demo-block>
</demo-section>
</template>

10
packages/switch/en-US.md
View File

@ -41,7 +41,13 @@ export default {
#### Advanced usage
```html
<van-switch :value="checked" size="36px" @input="onInput" />
<van-switch
:value="checked"
size="36px"
active-color="#4b0"
inactive-color="#f44"
@input="onInput"
/>
```
```js
@ -73,6 +79,8 @@ export default {
| loading | Whether to show loading icon | `Boolean` | `false` |
| disabled | Whether to disable switch | `Boolean` | `false` |
| size | Size of switch | `String` | `30px` |
| active-color | Background color when active | `String` | `#1989fa` |
| inactive-color | Background color when inactive | `String` | `#fff` |
### Event

5
packages/switch/index.vue
View File

@ -23,6 +23,8 @@ export default create({
value: Boolean,
loading: Boolean,
disabled: Boolean,
activeColor: String,
inactiveColor: String,
size: {
type: String,
default: '30px'
@ -32,7 +34,8 @@ export default create({
computed: {
style() {
return {
fontSize: this.size
fontSize: this.size,
backgroundColor: this.value ? this.activeColor : this.inactiveColor
};
}
},

8
packages/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -3,28 +3,28 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-switch van-switch--on" style="font-size:30px;">
<div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<div>
<div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;">
<div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size:30px;">
<div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
<div class="van-switch__node">
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</div>
</div>
<div>
<div class="van-switch van-switch--on" style="font-size:36px;">
<div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
<div class="van-switch__node">
<!---->
</div>

10
packages/switch/zh-CN.md
View File

@ -36,7 +36,13 @@ export default {
#### 高级用法
```html
<van-switch :value="checked" size="36px" @input="onInput" />
<van-switch
:value="checked"
size="36px"
active-color="#4b0"
inactive-color="#f44"
@input="onInput"
/>
```
```js
@ -69,6 +75,8 @@ export default {
| loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
| size | 开关尺寸 | `String` | `30px` | 1.0.0 |
| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.3.11 |
| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.3.11 |
### Event

9
packages/vant-css/src/switch.css
View File

@ -2,13 +2,14 @@
.van-switch {
height: 1em;
width: 1.6em;
width: 1.8em;
display: inline-block;
position: relative;
background: $white;
border-radius: 1em;
box-sizing: content-box;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 1em;
background-color: $white;
transition: background-color .3s;
&__node {
top: 0;
@ -34,7 +35,7 @@
background-color: $blue;
.van-switch__node {
transform: translateX(.6em);
transform: translateX(.8em);
}
}