Utility 工具类

Wux Weapp 提供了一些常用的样式，可以直接通过设置标签 class 的方式使用。

使用指南

在 page.wxss 中引入内置样式

  1. @import '../../dist/styles/index.wxss';

Colors 颜色类

  1. <!-- Color -->
  2. <view class="wux-light">Light</view>
  3. <view class="wux-stable">Stable</view>
  4. <view class="wux-positive">Positive</view>
  5. <view class="wux-calm">Calm</view>
  6. <view class="wux-balanced">Balanced</view>
  7. <view class="wux-energized">Energized</view>
  8. <view class="wux-assertive">Assertive</view>
  9. <view class="wux-royal">Royal</view>
  10. <view class="wux-dark">Dark</view>
  11. <!-- BackgroundColor -->
  12. <view class="wux-light--bg">Light</view>
  13. <view class="wux-stable--bg">Stable</view>
  14. <view class="wux-positive--bg">Positive</view>
  15. <view class="wux-calm--bg">Calm</view>
  16. <view class="wux-balanced--bg">Balanced</view>
  17. <view class="wux-energized--bg">Energized</view>
  18. <view class="wux-assertive--bg">Assertive</view>
  19. <view class="wux-royal--bg">Royal</view>
  20. <view class="wux-dark--bg">Dark</view>
  21. <!-- BorderColor -->
  22. <view class="wux-light--border">Light</view>
  23. <view class="wux-stable--border">Stable</view>
  24. <view class="wux-positive--border">Positive</view>
  25. <view class="wux-calm--border">Calm</view>
  26. <view class="wux-balanced--border">Balanced</view>
  27. <view class="wux-energized--border">Energized</view>
  28. <view class="wux-assertive--border">Assertive</view>
  29. <view class="wux-royal--border">Royal</view>
  30. <view class="wux-dark--border">Dark</view>

Alignment 文字对齐

  1. <view class="wux-text--left">Left</view>
  2. <view class="wux-text--right">Right</view>
  3. <view class="wux-text--center">Center</view>
  4. <view class="wux-text--justify">Justify</view>
  5. <view class="wux-text--nowrap">Nowrap</view>

Transformation 大小写转换

  1. <view class="wux-text--lowercase">Lowercase</view>
  2. <view class="wux-text--uppercase">Uppercase</view>
  3. <view class="wux-text--capitalize">Capitalize</view>

Ellipsis 文字省略

  1. <view class="wux-ellipsis">One line: https://github.com/wux-weapp/wux-weapp</view>
  2. <view class="wux-ellipsis--l2">Two lines: https://github.com/wux-weapp/wux-weapp</view>
  3. <view class="wux-ellipsis--l3">Three lines: https://github.com/wux-weapp/wux-weapp</view>

Floats 浮动类

  1. <view class="wux-clearfix">Clearfix</view>
  2. <view class="wux-pull-right">Pull right</view>
  3. <view class="wux-pull-left">Pull left</view>

Margin 边距类

  1. <!-- top、right、bottom、left、vertical、horizontal (0 - 30) -->
  2. <view class="wux-m--0">No margin</view>
  3. <view class="wux-margin--0">No margin</view>
  4. <view class="wux-mt--0">No margin top</view>
  5. <view class="wux-margin-top--0">No margin top</view>
  6. <view class="wux-p--0">No padding</view>
  7. <view class="wux-padding--0">No padding</view>
  8. <view class="wux-pt--0">No padding top</view>
  9. <view class="wux-padding-top--0">No padding top</view>
  10. ...

Hairline 1 像素边框

  1. <view class="wux-hairline--top">Border-top</view>
  2. <view class="wux-hairline--right">Border-right</view>
  3. <view class="wux-hairline--bottom">Border-bottom</view>
  4. <view class="wux-hairline--left">Border-left</view>
  5. <view class="wux-hairline--horizontal">Horizontal border</view>
  6. <view class="wux-hairline--vertical">Vertical border</view>
  7. <view class="wux-hairline--surrounded">Surrounded border</view>

视频演示

Utility