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 ```html
<div class="page-switch"> <div class="page-switch">
<div class="page-switch__wrapper"> <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 class="page-switch__text">{{switchStateText}}</div>
</div> </div>
<div class="page-switch__wrapper"> <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 class="page-switch__text">ON, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <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 class="page-switch__text">OFF, DISABLED</div>
</div> </div>
</div> </div>

6
docs/examples/switch.vue
View File

@ -5,15 +5,15 @@
<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">
<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 class="page-switch__text">{{switchStateText}}</div>
</div> </div>
<div class="page-switch__wrapper"> <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 class="page-switch__text">ON, DISABLED</div>
</div> </div>
<div class="page-switch__wrapper"> <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 class="page-switch__text">OFF, DISABLED</div>
</div> </div>
</div> </div>

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

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

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

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