介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运


ColorUI样式规则速记 微信小程序

字体大小

类名介绍实际属性说明
text-xsl特大号字font-size: 120rpx;用于图标、数字等特大显示
text-xs说明文本font-size: 20rpx;说明文本,标签文字等关注度低的文字
text-sl较大号字font-size: 80rpx;用于图标、数字等较大显示
text-xxl特殊字font-size: 44rpx;用于金额数字等信息
text-xl页面大标题font-size: 36rpx;页面大标题,用于结果页等单一信息页
text-lg页面小标题font-size: 32rpx;页面小标题,首要层级显示内容
text-df正文font-size: 28rpx;页面默认字号,用于摘要或阅读文本
text-sm辅助信息font-size: 24rpx;页面辅助信息,次级内容等

文字对齐

类名介绍实际属性
text-left特大号字text-align: left;
text-center较大号字text-align: center;
text-right特殊字text-align: right;

内外边距

内外边距一共有五种尺寸,{size}*类名分别为:xssmdflgxl,分别从*10rpx20rpx30rpx40rpx50rpx。类名介绍类名介绍.margin-{size}外边距.padding-{size}外边距.margin-lr-{size}水平方向外边距.padding-lr-{size}水平方向内边距.margin-tb-{size}垂直方向外边距.padding-tb-{size}垂直方向内边距.margin-top-{size}上外边距.padding-top-{size}上内边距.margin-right-{size}右外边距.padding-right-{size}右内边距margin-bottom-{size}下外边距.padding-bottom-{size}下内边距.margin-left-{size}左外边距.padding-left-{size}左内边距

图标用法

引入icon.css,直接用即可。

<!--page.wxml-->
<text class="cuIcon-apps text-gray"></text>

其中,colorui的图标,大部分是有两个模式的,一个普通状态,一个fill状态。fill状态直接在普通状态的名字后面加上fill即可。

flex 布局

  • 固定尺寸#在父级元素类名中添加flex flex-wrap之后,在子级元素类名添加以下类名即可。类名介绍实际属性basis-xs20%宽度flex-basis: 20%;basis-sm40%宽度flex-basis: 40%;basis-df50%宽度flex-basis: 50%;basis-lg60%宽度flex-basis: 60%;basis-xl80%宽度flex-basis: 80%;
  • 比例布局在父级元素类名中添加flex之后,在子级元素类名添加以下类名即可。类名介绍实际属性flex-sub相同宽度flex: 1;flex-twice两倍宽度flex: 2;flex-treble50%宽度flex: 3;
  • 水平对齐#在父级元素类名中添加flex ,同时添加以下类名即可。类名介绍实际属性justify-start左对齐(默认值)justify-content: flex-start;justify-end右对齐justify-content: flex-end;justify-center居中justify-content: center;justify-between两端对齐,项目之间的间隔都相等。justify-content: space-between;justify-around每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。justify-content: space-around;
  • 垂直对齐在父级元素类名中添加flex ,同时添加以下类名即可。类名介绍实际属性align-start起点对齐align-items: flex-start;align-end终点对齐align-items: flex-end;align-center中点对齐align-items: center;
阅读全文
公众号-介尘阅读时光
赞赏支持

0 Responses to “ColorUI样式规则速记 微信小程序”

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

×