blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +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>
<div class="zan-switch" :class="switchState" @click="toggleState">
<div class="zan-switch__node" :class="switchState">
<div class="zan-switch" :class="switchStates" @click="toggleState">
<div class="zan-switch__node">
<zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
</div>
<div class="zan-switch__bg"></div>
</div>
</template>
@ -40,13 +41,11 @@ export default {
}
},
computed: {
switchState: function() {
let switchState = this.checked ? ['is-on'] : ['is-off'];
switchStates: function() {
let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
'zan-switch--' + (this.disabled ? 'disabled' : '')];
if (this.disabled) switchState.push('is-disabled');
if (this.loading) switchState.push('is-loading');
return switchState;
return switchStates;
}
},
methods: {

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

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