grid-item.wxml 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <import src="../common/template/image.wxml" />
  2. <import src="../common/template/icon.wxml" />
  3. <wxs module="util">
  4. module.exports.getImageSize = function(column) { if (column >= 5) return 'small'; if (column == 4) return 'middle';
  5. return 'large'; }
  6. </wxs>
  7. <wxs module="_" src="../common/utils.wxs" />
  8. <view
  9. class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} class {{prefix}}-class"
  10. style="{{_._style([gridItemStyle, style, customStyle])}}"
  11. hover-class="{{hover ? classPrefix + '--hover':''}}"
  12. hover-stay-time="{{200}}"
  13. bindtap="onClick"
  14. aria-role="{{ariaRole || 'button'}}"
  15. aria-label="{{ariaLabel}}"
  16. aria-describedby="{{describedbyID}}"
  17. >
  18. <view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}">
  19. <view
  20. class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content"
  21. style="{{gridItemContentStyle}}"
  22. >
  23. <slot />
  24. <t-badge
  25. wx:if="{{image || icon}}"
  26. color="{{badgeProps.color || ''}}"
  27. content="{{badgeProps.content || ''}}"
  28. count="{{badgeProps.count || 0}}"
  29. dot="{{badgeProps.dot || false}}"
  30. max-count="{{badgeProps.maxCount || 99}}"
  31. offset="{{badgeProps.offset || []}}"
  32. shape="{{badgeProps.shape || 'circle'}}"
  33. show-zero="{{badgeProps.showZero || false}}"
  34. size="{{badgeProps.size || 'medium'}}"
  35. t-class="{{badgeProps.tClass}}"
  36. t-class-content="{{badgeProps.tClassContent}}"
  37. t-class-count="{{badgeProps.tClassCount}}"
  38. >
  39. <view
  40. class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"
  41. >
  42. <block wx:if="{{image && image != 'slot'}}">
  43. <template
  44. is="image"
  45. data="{{ src: image, shape: 'round', mode: 'widthFix', tClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]) + ' ' + prefix + '-class-image', ...imageProps }}"
  46. />
  47. </block>
  48. <slot name="image" />
  49. <template
  50. wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
  51. is="icon"
  52. data="{{class: classPrefix + '__icon', name: iconName, ...iconData}}"
  53. />
  54. </view>
  55. </t-badge>
  56. <view
  57. class="{{_.cls(classPrefix + '__words', [layout])}}"
  58. id="{{describedbyID}}"
  59. aria-label="{{ ariaLabel || (badgeProps.dot || badgeProps.count ? text + ',' + description + ',' + _.getBadgeAriaLabel({ ...badgeProps }) : '') }}"
  60. >
  61. <view
  62. wx:if="{{text}}"
  63. class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text"
  64. >
  65. {{text}}
  66. </view>
  67. <slot name="text" />
  68. <view
  69. wx:if="{{description}}"
  70. class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description"
  71. >
  72. {{description}}
  73. </view>
  74. <slot name="description" />
  75. </view>
  76. </view>
  77. </view>
  78. </view>