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

fix: ui tweaks

Browse Source
This commit is contained in:
jiangruowei 2017-02-13 18:05:14 +08:00
parent 29fb1c5845
commit 2c3cc3c296
3 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/examples/switch.md
View File

@ -12,11 +12,7 @@ export default {
}, },
methods: { methods: {
updateState(newState) { updateState(newState) {
console.log('changing');
this.switchState = newState; this.switchState = newState;
},
handleClick() {
alert('click');
} }
} }
}; };
@ -26,12 +22,15 @@ export default {
@component switch { @component switch {
padding: 0 15px 15px; padding: 0 15px 15px;
@descendent sample { @descendent wrapper {
margin: 0 15px; margin: 30px;
width: 100px;
float: left;
text-align: center;
} }
@descendent text { @descendent text {
margin-right: 20px; margin: 20px 0;
} }
} }
} }
@ -44,9 +43,14 @@ export default {
:::demo 样例代码 :::demo 样例代码
```html ```html
<div class="page-switch"> <div class="page-switch">
<span class="page-switch-text">Switch state: {{switchStateText}}</span> <div class="page-switch-wrapper">
<o2-switch class="page-switch-sample" :checked="switchState" :on-change="updateState"></o2-switch> <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<o2-switch class="page-switch-sample" :checked="false" :disabled="true"></o2-switch> <div class="page-switch-text">{{switchStateText}}</div>
</div>
<div class="page-switch-wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch-text">OFF, DISABLED</div>
</div>
</div> </div>
``` ```
@ -55,17 +59,16 @@ export default {
export default { export default {
data() { data() {
return { return {
switchState: false switchState: true
}; };
}, },
computed: { computed: {
switchStateText() { switchStateText() {
return this.switchState ? 'on' : 'off'; return this.switchState ? ' ON' : 'OFF';
} }
}, },
methods: { methods: {
updateState(newState) { updateState(newState) {
console.log('changing');
this.switchState = newState; this.switchState = newState;
} }
} }

6
packages/switch/src/switch.pcss
View File

@ -29,11 +29,17 @@
@when on { @when on {
background-color: #44db5e; background-color: #44db5e;
border-color: #44db5e; border-color: #44db5e;
@descendent node {
left: 0;
}
} }
@when off { @when off {
background-color: #fff; background-color: #fff;
border-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
@descendent node {
right: 0;
}
} }
@when loading { @when loading {

2
packages/switch/src/switch.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState"> <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
<div class="o2-switch-node"></div> <div class="o2-switch-node" :class="['is-' + switchState]"></div>
</div> </div>
</template> </template>