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

feat: ui tweaks

Browse Source
This commit is contained in:
jiangruowei 2017-03-02 17:21:20 +08:00
parent ec168a9b9c
commit bbf787218f
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,9 @@
<template> <template>
<div class="zan-switch" :class="switchState" @click="toggleState"> <div class="zan-switch" :class="switchStates" @click="toggleState">
<div class="zan-switch__node" :class="switchState"> <div class="zan-switch__node">
<zan-loading v-if="loading" class="zan-switch__loading"></zan-loading> <zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
</div> </div>
<div class="zan-switch__bg"></div>
</div> </div>
</template> </template>
@ -40,13 +41,11 @@ export default {
} }
}, },
computed: { computed: {
switchState: function() { switchStates: function() {
let switchState = this.checked ? ['is-on'] : ['is-off']; let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
'zan-switch--' + (this.disabled ? 'disabled' : '')];
if (this.disabled) switchState.push('is-disabled'); return switchStates;
if (this.loading) switchState.push('is-loading');
return switchState;
} }
}, },
methods: { methods: {

36
packages/zanui-css/src/switch.css
View File

@ -1,28 +1,31 @@
@import "./mixins/border_retina.css";
@component-namespace zan { @component-namespace zan {
@b switch { @b switch {
height: 29px; height: 29px;
width: 49px; width: 49px;
display: inline-block; display: inline-block;
border-radius: 16px;
position: relative; position: relative;
border: 1px solid; background: #fff;
border-radius: 16px;
&::after{
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
border-width: 3px;
border-radius: 32px;
}
@e node { @e node {
width: 27px; width: 27px;
height: 27px; height: 27px;
border-radius: 100%; border-radius: 100%;
background-color: #fff; background-color: #fff;
border: .5px solid rgba(0, 0, 0, .1);
position: absolute; position: absolute;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
@when on { left: 0;
left: 20px; top: 1px;
transition: all .5s ease-in-out; &::after {
} @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
border-radius: 100%;
@when off {
left: 0;
transition: all .5s ease-in-out;
} }
} }
@ -35,17 +38,20 @@
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
} }
@when on { @m on {
background-color: #44db5e; background-color: #44db5e;
border-color: #44db5e; &::after { border-color: #44db5e; }
.zan-switch__node {
transform: translateX(20px);
}
} }
@when off { @m off {
background-color: #fff; background-color: #fff;
border-color: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1);
} }
@when disabled { @m disabled {
opacity: .4; opacity: .4;
} }
} }