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: update switch style

Browse Source
This commit is contained in:
jiangruowei 2017-03-01 11:12:16 +08:00
parent 9a4dc8fb64
commit 456cf908af
4 changed files with 50 additions and 26 deletions
docs
examples-docs
switch.md
examples
switch.vue
packages
switch/src
switch.vue
zanui-css/src
switch.css

34
docs/examples-docs/switch.md

@ -4,17 +4,29 @@
```html ```html
<div class="page-switch"> <div class="page-switch">
<div class="page-switch__wrapper"> <h1 class="page-title">Switch</h1>
<z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch> <h2 class="page-sub-title">基础用法</h2>
<div class="page-switch__text">{{switchStateText}}</div> <div class="page-switch">
</div> <div class="page-switch__wrapper">
<div class="page-switch__wrapper"> <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch> <div class="page-switch__text">{{switchStateText}}</div>
<div class="page-switch__text">ON, DISABLED</div> </div>
</div> <div class="page-switch__wrapper">
<div class="page-switch__wrapper"> <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch> <div class="page-switch__text">ON, DISABLED</div>
<div class="page-switch__text">OFF, DISABLED</div> </div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div> </div>
</div> </div>

14
docs/examples/switch.vue

@ -5,17 +5,25 @@
<h2 class="page-sub-title">基础用法</h2> <h2 class="page-sub-title">基础用法</h2>
<div class="page-switch"> <div class="page-switch">
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<z-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></z-switch> <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div> <div class="page-switch__text">{{switchStateText}}</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<z-switch class="some-customized-class" :checked="true" :disabled="true"></z-switch> <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div> <div class="page-switch__text">ON, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <div class="page-switch__wrapper">
<z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch> <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div> <div class="page-switch__text">OFF, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div> </div>
</div> </div>
</template> </template>

8
packages/switch/src/switch.vue

@ -1,6 +1,8 @@
<template> <template>
<div class="z-switch" :class="switchState" @click="toggleState"> <div class="zan-switch" :class="switchState" @click="toggleState">
<div class="z-switch__node" :class="switchState"></div> <div class="zan-switch__node" :class="switchState">
<zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
</div>
</div> </div>
</template> </template>
@ -18,7 +20,7 @@
* <z-switch checked="true" disabled="false"></o2-switch> * <z-switch checked="true" disabled="false"></o2-switch>
*/ */
export default { export default {
name: 'z-switch', name: 'zan-switch',
props: { props: {
checked: { checked: {
type: Boolean, type: Boolean,

20
packages/zanui-css/src/switch.css

@ -1,4 +1,4 @@
@component-namespace z { @component-namespace zan {
@b switch { @b switch {
height: 29px; height: 29px;
width: 49px; width: 49px;
@ -26,6 +26,15 @@
} }
} }
@e loading {
width: 16px;
height: 16px;
position: relative;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
@when on { @when on {
background-color: #44db5e; background-color: #44db5e;
border-color: #44db5e; border-color: #44db5e;
@ -37,14 +46,7 @@
} }
@when disabled { @when disabled {
@when off { opacity: .4;
background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
}
@when on {
background-color: #a6e7b1;
border-color: #a6e7b1;
}
} }
} }
} }