<view class="page">
    <view class="page__hd">
        <view class="page__title">Rater</view>
        <view class="page__desc">评分组件</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="Normal Usage">
            <wux-cell title="Default" hover-class="none">
                <wux-rater slot="footer" />
            </wux-cell>
            <wux-cell title="Set default score = 5" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 5 }}" />
            </wux-cell>
            <wux-cell title="Change color" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" active-color="#33cd5f" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="AllowHalf & AllowClear">
            <wux-cell title="AllowHalf = true" hover-class="none">
                <wux-rater slot="footer" allow-half default-value="{{ 2.5 }}" />
            </wux-cell>
            <wux-cell title="AllowClear = true" hover-class="none">
                <wux-rater slot="footer" allow-half allow-clear default-value="{{ 2.5 }}" />
            </wux-cell>
            <wux-cell title="AllowTouchMove = true" hover-class="none">
                <wux-rater slot="footer" allow-half allow-clear allow-touch-move default-value="{{ 2.5 }}" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Disabled = true">
            <wux-cell title="Your history score" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" disabled />
            </wux-cell>
            <wux-cell title="Decimal score 3.7" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3.7 }}" disabled />
            </wux-cell>
            <wux-cell title="Custom font-size(15px)" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" font-size="{{ 15 }}" disabled />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom star">
            <wux-cell title="Loving" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" star="♡" />
            </wux-cell>
            <wux-cell title="Sunshine" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" star="☼" />
            </wux-cell>
            <wux-cell title="Smilies" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" star="☻" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom Icon">
            <wux-cell title="Loving" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" icon="ios-heart" />
            </wux-cell>
            <wux-cell title="Sunshine" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" icon="ios-sunny" />
            </wux-cell>
            <wux-cell title="Smilies" hover-class="none">
                <wux-rater slot="footer" default-value="{{ 3 }}" margin="{{ 15 }}" icon="ios-happy" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Custom text">
            <wux-cell title="Star" hover-class="none">
                <view slot="footer">
                    <wux-rater controlled value="{{ value }}" bind:change="onChange" />
                    <text class="wux-rater__text">{{ value }} stars</text>
                </view>
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Set callback">
            <wux-cell title="How embarrass" hover-class="none">
                <wux-rater slot="footer" controlled value="{{ value }}" star="囧" bind:change="onChange" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Controlled">
            <wux-cell title="Very good" hover-class="none">
                <wux-rater slot="footer" controlled value="{{ slider }}" star="屌" bind:change="sliderChange" />
            </wux-cell>
            <wux-cell hover-class="none">
                <slider value="{{ slider }}" show-value min="0" max="5" bindchange="sliderChange" />
            </wux-cell>
        </wux-cell-group>
        <wux-cell-group title="Set callback">
            <block wx:for="{{ items }}" wx:key="index">
                <wux-cell title="{{ item.text }}" hover-class="none">
                    <wux-rater slot="footer" default-value="{{ item.value }}" />
                </wux-cell>
            </block>
        </wux-cell-group>
    </view>
</view>