ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-16 08:00:34 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

switch docs

Browse Source
This commit is contained in:
cookfront
2017-03-31 20:47:09 +08:00
parent 4d974ce619
commit 4e9126e352
4 changed files with 101 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples-dist/popup.vue
View File

@@ -61,7 +61,7 @@
}
.zan-popup-4,
.zan-popup-4 {
.zan-popup-5 {
width: 100%;
height: 100%;
}

50
docs/examples-dist/switch.vue
View File

@@ -1,41 +1,34 @@
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
<div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
</example-block><example-block title="">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</example-block><example-block title="">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</example-block></section></template>
<style>
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@e wrapper {
width: 33.33%;
float: left;
.examples {
text-align: center;
}
@e text {
margin: 20px 0;
margin: 20px auto;
}
}
}
@@ -48,11 +41,6 @@ export default {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;