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>
<div class="van-cell__value"> <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 class="van-switch__node">
<!----> <!---->
</div> </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>
<div class="van-cell__value"> <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-switch__node">
<!----> <!---->
</div> </div>

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

@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <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-switch__node">
<!----> <!---->
</div> </div>
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <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 class="van-switch__node">
<!----> <!---->
</div> </div>
@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
<div class="van-cell__value"> <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-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 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>

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

@ -13,7 +13,13 @@
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <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-block>
</demo-section> </demo-section>
</template> </template>

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

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

5
packages/switch/index.vue
View File

@ -23,6 +23,8 @@ export default create({
value: Boolean, value: Boolean,
loading: Boolean, loading: Boolean,
disabled: Boolean, disabled: Boolean,
activeColor: String,
inactiveColor: String,
size: { size: {
type: String, type: String,
default: '30px' default: '30px'
@ -32,7 +34,8 @@ export default create({
computed: { computed: {
style() { style() {
return { 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`] = ` exports[`renders demo correctly 1`] = `
<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-switch__node">
<!----> <!---->
</div> </div>
</div> </div>
</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 class="van-switch__node">
<!----> <!---->
</div> </div>
</div> </div>
</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-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 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> </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 class="van-switch__node">
<!----> <!---->
</div> </div>

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

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

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

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