<view class="page">
    <view class="page__hd">
        <view class="page__title">InputNumber</view>
        <view class="page__desc">数字输入框</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="默认">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number default-value="1024" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="主题色">
            <wux-cell title="Light" hover-class="none">
                <wux-input-number color="light" slot="footer" />
            </wux-cell>
            <wux-cell title="Stable" hover-class="none">
                <wux-input-number color="stable" slot="footer" />
            </wux-cell>
            <wux-cell title="Positive" hover-class="none">
                <wux-input-number color="positive" slot="footer" />
            </wux-cell>
            <wux-cell title="Calm" hover-class="none">
                <wux-input-number color="calm" slot="footer" />
            </wux-cell>
            <wux-cell title="Balanced" hover-class="none">
                <wux-input-number color="balanced" slot="footer" />
            </wux-cell>
            <wux-cell title="Energized" hover-class="none">
                <wux-input-number color="energized" slot="footer" />
            </wux-cell>
            <wux-cell title="Assertive" hover-class="none">
                <wux-input-number color="assertive" slot="footer" />
            </wux-cell>
            <wux-cell title="Royal" hover-class="none">
                <wux-input-number color="royal" slot="footer" />
            </wux-cell>
            <wux-cell title="Dark" hover-class="none">
                <wux-input-number color="dark" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="圆形按钮">
            <wux-cell title="Light" hover-class="none">
                <wux-input-number shape="circle" color="light" slot="footer" />
            </wux-cell>
            <wux-cell title="Stable" hover-class="none">
                <wux-input-number shape="circle" color="stable" slot="footer" />
            </wux-cell>
            <wux-cell title="Positive" hover-class="none">
                <wux-input-number shape="circle" color="positive" slot="footer" />
            </wux-cell>
            <wux-cell title="Calm" hover-class="none">
                <wux-input-number shape="circle" color="calm" slot="footer" />
            </wux-cell>
            <wux-cell title="Balanced" hover-class="none">
                <wux-input-number shape="circle" color="balanced" slot="footer" />
            </wux-cell>
            <wux-cell title="Energized" hover-class="none">
                <wux-input-number shape="circle" color="energized" slot="footer" />
            </wux-cell>
            <wux-cell title="Assertive" hover-class="none">
                <wux-input-number shape="circle" color="assertive" slot="footer" />
            </wux-cell>
            <wux-cell title="Royal" hover-class="none">
                <wux-input-number shape="circle" color="royal" slot="footer" />
            </wux-cell>
            <wux-cell title="Dark" hover-class="none">
                <wux-input-number shape="circle" color="dark" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="设置 callback 回调函数，在调试窗口中输出">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number longpress disabled="{{ false }}" value="{{ value }}" controlled min="{{ -10 }}" max="{{ 10 }}" bind:change="onChange" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="自定义样式">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number wux-sub-class="sub" wux-input-class="input" wux-add-class="add" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="设置步长为0.5">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number step="{{ .5 }}" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="设置值为1，最小值为-5，最大值为8">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number default-value="1" min="{{ -5 }}" max="{{ 8 }}" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="设置可输入">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number disabled="{{ false }}" slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="设置长按快速加减">
            <wux-cell title="数量" hover-class="none">
                <wux-input-number longpress slot="footer" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="循环输出多个组件">
            <block wx:for="{{ items }}" wx:key="">
                <wux-cell title="{{ item.text }}" hover-class="none">
                    <wux-input-number default-value="{{ item.value }}" slot="footer" />
                </wux-cell>
            </block>
        </wux-cell-group>
    </view>
</view>