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;

flex 布局

  • 固定尺寸

    在父级元素类名中添加flex flex-wrap之后,在子级元素类名添加以下类名即可。

    类名 介绍 实际属性
    basis-xs 20%宽度 flex-basis: 20%;
    basis-sm 40%宽度 flex-basis: 40%;
    basis-df 50%宽度 flex-basis: 50%;
    basis-lg 60%宽度 flex-basis: 60%;
    basis-xl 80%宽度 flex-basis: 80%;
  • 比例布局

    在父级元素类名中添加flex之后,在子级元素类名添加以下类名即可。

    类名 介绍 实际属性
    flex-sub 相同宽度 flex: 1;
    flex-twice 两倍宽度 flex: 2;
    flex-treble 50%宽度 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;
  • 内外边距

    内外边距一共有五种尺寸,{size}*类名分别为:xssmdflgxl,分别从*10rpx20rpx30rpx40rpx50rpx

    类名 介绍 类名 介绍
    .margin- 外边距 .padding- 外边距
    .margin-lr- 水平方向外边距 .padding-lr- 水平方向内边距
    .margin-tb- 垂直方向外边距 .padding-tb- 垂直方向内边距
    .margin-top- 上外边距 .padding-top- 上内边距
    .margin-right- 右外边距 .padding-right- 右内边距
    margin-bottom- 下外边距 .padding-bottom- 下内边距
    .margin-left- 左外边距 .padding-left- 左内边距

图标用法

由于之前在app.wxss引入了icon.css,因此在这里要使用的话,直接用即可。

使用方法:text标签,类名:cuIcon-{{name}}

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

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

shadow-warp 用来给周围添加阴影

margin和padding的区别

margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

(1)padding-left:10px; /margin-left:10px;          左内/外边距

(2)padding-right:10px; /margin-right:10px;        右内/外边距

(3)padding-top:10px; /margin-top:10px;        上内/外边距

(4)padding-bottom:10px; /margin-bottom:10px;  下内/外边距

(5)padding:10px;/ margin:10px;     四边统一内/外边距

(6)padding:10px 20px; /margin:10px 20px;         上下、左右内/外边距

(7)padding:10px 20px 30px;/margin:10px 20px 30px;   上、左右、下内/外边距

(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距

solid-right 是用来给元素右边加一条竖线 ,同理solid-bottom 是给下边添加一条横线

margin-top-sm 是让元素向上有一个外边距,同理 margin-tb-sm 是向下有个外边距

shadow-blur 是根据背景图片散发阴影

flex-directionflex-direction:column 的意思,也就是保证元素呈现下面的排列(上下排列):

image-20210315205536844

在微信小程序开发官网中这样解释:

image-20210315205655178

圆角样式(border-radius)

首先先将内容方块区域大小显示出来,然后在方块的四个角贴上你设置的半径大小的四个圆,将边角超出圆的区域隐藏,就是圆角样式的最终呈现效果。

image-20210327112417855

圆角样式如同margin一样,可以单独对每个边角的小圆设置一个不一样的半径值,这样我们就可以利用圆角样式设计出各式各样的图形出来
四个属性值:Border-radius:50px 30px 80px 150px; 两个属性值:左上 右上 右下 左下

Flex 布局教程:语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?tdsourcetag=s_pcqq_aiomsg

当一个view元素不能伸展到最下方的时候,在该view底部代码添加如下代码可以让其伸展到最下边(目前不知道为什么可以这样):
  <view class="cu-bar">

  </view>
posted @ 2021-03-27 12:10  RealGang  阅读(3716)  评论(0编辑  收藏  举报