12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <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>
|