<view class="page">
    <view class="page__hd">
        <view class="page__title">Swicth</view>
        <view class="page__desc">滑动开关</view>
    </view>
    <view class="page__bd">
        <form bindsubmit="formSubmit">
            <wux-cell-group title="Form switch">
                <wux-cell title="Light">
                    <wux-switch name="light" slot="footer" color="light" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Stable">
                    <wux-switch name="stable" slot="footer" color="stable" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Positive">
                    <wux-switch name="positive" slot="footer" color="positive" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Calm">
                    <wux-switch name="calm" slot="footer" color="calm" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Balanced">
                    <wux-switch name="balanced" slot="footer" color="balanced" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Energized">
                    <wux-switch name="energized" slot="footer" color="energized" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Assertive">
                    <wux-switch name="assertive" slot="footer" color="assertive" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Royal">
                    <wux-switch name="royal" slot="footer" color="royal" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="Dark">
                    <wux-switch name="dark" slot="footer" color="dark" value="{{ value1 }}" bind:change="onChange1" />
                </wux-cell>
                <wux-cell title="On">
                    <wux-switch name="a" slot="footer" value="{{ value2 }}" bind:change="onChange2" />
                </wux-cell>
                <wux-cell title="Off">
                    <wux-switch name="b" slot="footer" value="{{ value3 }}" bind:change="onChange3" />
                </wux-cell>
                <wux-cell title="Custom color">
                    <wux-switch name="c" slot="footer" value="{{ value4 }}" color="red" bind:change="onChange4" />
                </wux-cell>
                <wux-cell title="Custom color">
                    <wux-switch name="d" slot="footer" value="{{ value5 }}" color="yellow" bind:change="onChange5" />
                </wux-cell>
                <wux-cell title="Disabled on">
                    <wux-switch name="e" slot="footer" value="{{ true }}" disabled />
                </wux-cell>
                <wux-cell title="Disabled off">
                    <wux-switch name="f" slot="footer" value="{{ false }}" disabled />
                </wux-cell>
                <wux-cell title="Custom Text">
                    <wux-switch name="g" slot="footer" value="{{ value5 }}" checkedText="开" uncheckedText="关" bind:change="onChange5" />
                </wux-cell>
                <wux-cell title="Custom Text">
                    <wux-switch name="h" slot="footer" value="{{ value5 }}" bind:change="onChange5">
                        <text slot="checked">√</text>
                        <text slot="unchecked">×</text>
                    </wux-switch>
                </wux-cell>
                <wux-cell title="Loading">
                    <wux-switch name="i" slot="footer" value="{{ value6 }}" loading bind:change="onChange6" />
                </wux-cell>
                <wux-cell title="Async">
                    <wux-switch name="j" slot="footer" color="positive" value="{{ value7 }}" loading="{{ loading }}" bind:change="onChange7" />
                </wux-cell>
            </wux-cell-group>
            <view class="btn-area">
                <button formType="submit">Submit</button>
            </view>
        </form>
    </view>
</view>