gap.nvue 934 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案列</text>
  5. <view class="u-page__gap-item">
  6. <u-gap bgColor="#f3f4f6"></u-gap>
  7. </view>
  8. </view>
  9. <view class="u-demo-block">
  10. <text class="u-demo-block__title">自定义颜色</text>
  11. <view class="u-page__gap-item">
  12. <u-gap bgColor="#2979ff"></u-gap>
  13. </view>
  14. </view>
  15. <view class="u-demo-block">
  16. <text class="u-demo-block__title">自定义高度</text>
  17. <view class="u-page__gap-item">
  18. <u-gap bgColor="#f3f4f6" height="40"></u-gap>
  19. </view>
  20. </view>
  21. <view class="u-demo-block">
  22. <text class="u-demo-block__title">自定义上下边距</text>
  23. <view class="u-page__gap-item">
  24. <u-gap
  25. bgColor="#f3f4f6"
  26. marginTop="20"
  27. marginBottom="20"
  28. ></u-gap>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. }
  36. </script>
  37. <style lang="scss">
  38. </style>