index.wxml 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">InputNumber</view>
  4. <view class="page__desc">数字输入框</view>
  5. </view>
  6. <view class="page__bd">
  7. <wux-cell-group title="默认">
  8. <wux-cell title="数量" hover-class="none">
  9. <wux-input-number default-value="1024" slot="footer" />
  10. </wux-cell>
  11. </wux-cell-group>
  12. <wux-cell-group title="主题色">
  13. <wux-cell title="Light" hover-class="none">
  14. <wux-input-number color="light" slot="footer" />
  15. </wux-cell>
  16. <wux-cell title="Stable" hover-class="none">
  17. <wux-input-number color="stable" slot="footer" />
  18. </wux-cell>
  19. <wux-cell title="Positive" hover-class="none">
  20. <wux-input-number color="positive" slot="footer" />
  21. </wux-cell>
  22. <wux-cell title="Calm" hover-class="none">
  23. <wux-input-number color="calm" slot="footer" />
  24. </wux-cell>
  25. <wux-cell title="Balanced" hover-class="none">
  26. <wux-input-number color="balanced" slot="footer" />
  27. </wux-cell>
  28. <wux-cell title="Energized" hover-class="none">
  29. <wux-input-number color="energized" slot="footer" />
  30. </wux-cell>
  31. <wux-cell title="Assertive" hover-class="none">
  32. <wux-input-number color="assertive" slot="footer" />
  33. </wux-cell>
  34. <wux-cell title="Royal" hover-class="none">
  35. <wux-input-number color="royal" slot="footer" />
  36. </wux-cell>
  37. <wux-cell title="Dark" hover-class="none">
  38. <wux-input-number color="dark" slot="footer" />
  39. </wux-cell>
  40. </wux-cell-group>
  41. <wux-cell-group title="圆形按钮">
  42. <wux-cell title="Light" hover-class="none">
  43. <wux-input-number shape="circle" color="light" slot="footer" />
  44. </wux-cell>
  45. <wux-cell title="Stable" hover-class="none">
  46. <wux-input-number shape="circle" color="stable" slot="footer" />
  47. </wux-cell>
  48. <wux-cell title="Positive" hover-class="none">
  49. <wux-input-number shape="circle" color="positive" slot="footer" />
  50. </wux-cell>
  51. <wux-cell title="Calm" hover-class="none">
  52. <wux-input-number shape="circle" color="calm" slot="footer" />
  53. </wux-cell>
  54. <wux-cell title="Balanced" hover-class="none">
  55. <wux-input-number shape="circle" color="balanced" slot="footer" />
  56. </wux-cell>
  57. <wux-cell title="Energized" hover-class="none">
  58. <wux-input-number shape="circle" color="energized" slot="footer" />
  59. </wux-cell>
  60. <wux-cell title="Assertive" hover-class="none">
  61. <wux-input-number shape="circle" color="assertive" slot="footer" />
  62. </wux-cell>
  63. <wux-cell title="Royal" hover-class="none">
  64. <wux-input-number shape="circle" color="royal" slot="footer" />
  65. </wux-cell>
  66. <wux-cell title="Dark" hover-class="none">
  67. <wux-input-number shape="circle" color="dark" slot="footer" />
  68. </wux-cell>
  69. </wux-cell-group>
  70. <wux-cell-group title="监听 onChange 事件,在调试窗口中输出">
  71. <wux-cell title="数量" hover-class="none">
  72. <wux-input-number disabled="{{ false }}" value="{{ value }}" controlled min="{{ -10 }}" max="{{ 10 }}" bind:change="onChange" slot="footer" />
  73. </wux-cell>
  74. </wux-cell-group>
  75. <wux-cell-group title="格式化到整数">
  76. <wux-cell title="数量" hover-class="none">
  77. <wux-input-number digits="{{ 0 }}" disabled="{{ false }}" default-value="1" slot="footer" />
  78. </wux-cell>
  79. </wux-cell-group>
  80. <wux-cell-group title="格式化到一位小数">
  81. <wux-cell title="数量" hover-class="none">
  82. <wux-input-number digits="{{ 1 }}" disabled="{{ false }}" default-value="1.1" slot="footer" />
  83. </wux-cell>
  84. </wux-cell-group>
  85. <wux-cell-group title="自定义样式">
  86. <wux-cell title="数量" hover-class="none">
  87. <wux-input-number wux-sub-class="sub" wux-input-class="input" wux-add-class="add" slot="footer" />
  88. </wux-cell>
  89. </wux-cell-group>
  90. <wux-cell-group title="设置步长为0.5">
  91. <wux-cell title="数量" hover-class="none">
  92. <wux-input-number step="{{ .5 }}" slot="footer" />
  93. </wux-cell>
  94. </wux-cell-group>
  95. <wux-cell-group title="设置值为1,最小值为-5,最大值为8">
  96. <wux-cell title="数量" hover-class="none">
  97. <wux-input-number default-value="1" min="{{ -5 }}" max="{{ 8 }}" slot="footer" />
  98. </wux-cell>
  99. </wux-cell-group>
  100. <wux-cell-group title="设置可输入">
  101. <wux-cell title="数量" hover-class="none">
  102. <wux-input-number disabled="{{ false }}" slot="footer" />
  103. </wux-cell>
  104. </wux-cell-group>
  105. <wux-cell-group title="设置长按快速加减">
  106. <wux-cell title="数量" hover-class="none">
  107. <wux-input-number longpress slot="footer" />
  108. </wux-cell>
  109. </wux-cell-group>
  110. <wux-cell-group title="循环输出多个组件">
  111. <block wx:for="{{ items }}" wx:key="index">
  112. <wux-cell title="{{ item.text }}" hover-class="none">
  113. <wux-input-number default-value="{{ item.value }}" slot="footer" />
  114. </wux-cell>
  115. </block>
  116. </wux-cell-group>
  117. </view>
  118. </view>