# UmsSwitch

<template>
    <div class="wrap">
        <ums-header title="Switch" :right="false" leftPartText="返回" @onLeftPartClick="back"></ums-header>
        <div class="part">
            <text class="title">自定义颜色</text>
            <ums-switch color="red" @swithToggle="consoleResult"></ums-switch>
        </div>
        <div class="part">
            <text class="title">自定义大小</text>
            <ums-switch switchHeight="100px" switch-width="180px" @swithToggle="consoleResult"></ums-switch>
        </div>
        <div class="part">
            <text class="title">默认开启</text>
            <ums-switch v-model="state" @swithToggle="consoleResult"></ums-switch>
        </div>
        <div class="part">
            <text class="title">默认禁用开启</text>
            <ums-switch :state="true" :disable="true" @swithToggle="consoleResult"></ums-switch>
        </div>
    </div>
</template>

<script>
    var modal = weex.requireModule('modal');
    var navigator = weex.requireModule('navigator')
    import {UmsSwitch, UmsHeader} from '../../index.js';
    export default{
        data () {
            return {
                state: false
            }
        },
        components:{
            UmsSwitch,
            UmsHeader
        },
        methods:{
            consoleResult(flag){
                modal.toast({
                    duration: 1,
                    message:flag
                })
            },
            back(){
                navigator.pop()
            }
        }
    }
</script>

<style lang='stylus' rel="stylesheet/stylus" scoped>
    .title
        font-size: 48px
    .wrap
        align-items center
    .part
        margin-top: 50px
        align-items center
</style>