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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/examples-docs/switch.md
View File

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

14
docs/examples/switch.vue
View File

@ -5,17 +5,25 @@
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<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>
<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>
<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>
<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>
</template>

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

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

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

@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b switch {
height: 29px;
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 {
background-color: #44db5e;
border-color: #44db5e;
@ -37,14 +46,7 @@
}
@when disabled {
@when off {
background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
}
@when on {
background-color: #a6e7b1;
border-color: #a6e7b1;
}
opacity: .4;
}
}
}