index.wxml 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Radio</view>
  4. <view class="page__desc">单选框</view>
  5. </view>
  6. <view class="page__bd">
  7. <wux-segmented-control defaultCurrent="1" values="{{ ['left', 'right'] }}" bind:change="onSegmentedControlChange" />
  8. <form bindsubmit="formSubmit">
  9. <wux-radio-group iconPosition="{{ iconPosition }}" name="a" value="{{ value1 }}" title="Default" bind:change="onChange1">
  10. <wux-radio color="light" title="Light" value="1" />
  11. <wux-radio color="stable" title="Stable" value="2" />
  12. <wux-radio color="positive" title="Positive" value="3" />
  13. <wux-radio color="calm" title="Calm" value="4" />
  14. <wux-radio color="balanced" title="Balanced" value="5" />
  15. <wux-radio color="energized" title="Energized" value="6" />
  16. <wux-radio color="assertive" title="Assertive" value="7" />
  17. <wux-radio color="royal" title="Royal" value="8" />
  18. <wux-radio color="dark" title="Dark" value="9" />
  19. </wux-radio-group>
  20. <wux-radio-group iconPosition="{{ iconPosition }}" name="b" value="{{ value2 }}" title="Label" bind:change="onChange2">
  21. <wux-radio title="Java" label="details" value="1" />
  22. <wux-radio title="PHP" label="details" value="2" />
  23. </wux-radio-group>
  24. <wux-radio-group iconPosition="{{ iconPosition }}" name="c" value="{{ value3 }}" title="Thumb" bind:change="onChange3">
  25. <wux-radio thumb="http://cdn.skyvow.cn/logo.png" title="Java" value="1" />
  26. <wux-radio thumb="http://cdn.skyvow.cn/logo.png" title="PHP" value="2" />
  27. </wux-radio-group>
  28. <wux-radio-group iconPosition="{{ iconPosition }}" name="d" value="{{ value4 }}" title="Trigger onChange" bind:change="onChange4">
  29. <wux-radio title="Java" value="1" />
  30. <wux-radio title="PHP" value="2" />
  31. </wux-radio-group>
  32. <wux-radio-group iconPosition="{{ iconPosition }}" name="e" title="Disabled & readOnly" value="{{ value4 }}" bind:change="onChange4">
  33. <wux-radio title="Java" value="1" disabled />
  34. <wux-radio title="PHP" value="2" />
  35. <wux-radio title="AV" value="3" readOnly />
  36. </wux-radio-group>
  37. <wux-radio-group iconPosition="{{ iconPosition }}" name="f" disabled value="{{ value4 }}" title="Disable for the radio group" bind:change="onChange4">
  38. <wux-radio title="Java" value="1" />
  39. <wux-radio title="PHP" value="2" />
  40. </wux-radio-group>
  41. <wux-radio-group iconPosition="{{ iconPosition }}" name="g" readOnly value="{{ value5 }}" options="{{ options }}" title="ReadOnly for the radio group" bind:change="onChange5" />
  42. <wux-radio-group iconPosition="{{ iconPosition }}" name="h" value="{{ value5 }}" options="{{ options }}" title="Options" bind:change="onChange5" />
  43. <wux-radio-group iconPosition="{{ iconPosition }}" name="i" iconSize="23" iconOn="success" iconOff="circle" value="{{ value5 }}" options="{{ options }}" title="Custom icon style" bind:change="onChange5" />
  44. <wux-radio-group iconPosition="{{ iconPosition }}" name="j" mode="card" value="{{ value5 }}" options="{{ options }}" title="Card List" bind:change="onChange5" />
  45. <wux-cell-group title="配合 List 使用(非 radioGroup)">
  46. <block wx:for="{{ options }}" wx:for-item="option" wx:key="value">
  47. <wux-cell data-radio-ref="{{ 'radio_ref_' + index }}" bind:click="onItemClick" title="{{ option.title }}">
  48. <wux-radio slot="footer" id="{{ 'radio_ref_' + index }}" value="{{ option.value }}" checked="{{ value6 === option.value }}" />
  49. </wux-cell>
  50. </block>
  51. </wux-cell-group>
  52. <view class="btn-area">
  53. <button formType="submit">Submit</button>
  54. </view>
  55. </form>
  56. </view>
  57. </view>