label.wxml 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <import src="../../../common/head.wxml" />
  2. <import src="../../../common/foot.wxml" />
  3. <view class="container page" data-weui-theme="{{theme}}">
  4. <template is="head" data="{{title: 'label'}}"/>
  5. <view class="page-body">
  6. <view class="page-section page-section-gap">
  7. <view class="page-section-title">表单组件在label内</view>
  8. <checkbox-group class="group" bindchange="checkboxChange">
  9. <view class="label-1" wx:for="{{checkboxItems}}">
  10. <label>
  11. <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  12. <text class="label-1-text">{{item.value}}</text>
  13. </label>
  14. </view>
  15. </checkbox-group>
  16. </view>
  17. <view class="page-section page-section-gap">
  18. <view class="page-section-title">label用for标识表单组件</view>
  19. <radio-group class="group" bindchange="radioChange">
  20. <view class="label-2" wx:for="{{radioItems}}">
  21. <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
  22. <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
  23. </view>
  24. </radio-group>
  25. </view>
  26. <view class="page-section page-section-gap">
  27. <view class="page-section-title">label内有多个时选中第一个</view>
  28. <label class="label-3">
  29. <checkbox class="checkbox-3">选项一</checkbox>
  30. <checkbox class="checkbox-3">选项二</checkbox>
  31. <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
  32. </label>
  33. </view>
  34. </view>
  35. <template is="foot" />
  36. </view>