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

fix：switch方向改变&rename

Browse Source
This commit is contained in:
jiangruowei 2017-02-28 11:35:56 +08:00
parent 1c81270de2
commit 09cf3d1c25
4 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,15 +5,15 @@
```html
<div class="page-switch">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<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">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<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">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>

6
docs/examples/switch.vue
View File

@ -5,15 +5,15 @@
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<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">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<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">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<z-switch class="some-customized-class" :checked="false" :disabled="true"></z-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>

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

@ -6,7 +6,7 @@
<script>
/**
* o2-switch
* z-switch
* @module components/switch
* @desc 开关
* @param {boolean} [checked=false] - 开关状态
@ -15,10 +15,10 @@
* @param {callback} [onChange] - 开关状态改变回调函数。
*
* @example
* <o2-switch checked="true" disabled="false"></o2-switch>
* <z-switch checked="true" disabled="false"></o2-switch>
*/
export default {
name: 'o2-switch',
name: 'z-switch',
props: {
checked: {
type: Boolean,

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

@ -16,12 +16,12 @@
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: 0;
left: 20px;
transition: all .5s ease-in-out;
}
@when off {
left: 20px;
left: 0;
transition: all .5s ease-in-out;
}
}
@ -36,10 +36,6 @@
border-color: rgba(0, 0, 0, .1);
}
@when loading {
/* TODO */
}
@when disabled {
@when off {
background-color: #f2f2f2;
@ -47,6 +43,7 @@
}
@when on {
background-color: #a6e7b1;
border-color: #a6e7b1;
}
}
}