简单整理appcan [base] [box] [color] class

举报
青年码农 发表于 2022/08/24 22:28:58 2022/08/24
【摘要】 base uc-[l类型][类别]。。 用于定义不同的圆角类型为t带表TOP,l代表LEFT,b代表BOTTOM,r代表RIGHT,a代表ALL类别为数字编号,用于定义不同大小的圆角us[类别(数字)] 用于定义不同大小和不同颜色的外阴影us-i[类别] 用于定义不同大小和不同颜色的内阴影uts 用于定义文字阴影大小及阴影颜色u...

base

uc-[l类型][类别]。。 用于定义不同的圆角
类型为t带表TOP,l代表LEFT,b代表BOTTOM,r代表RIGHT,a代表ALL
类别为数字编号,用于定义不同大小的圆角
us[类别(数字)] 用于定义不同大小和不同颜色的外阴影
us-i[类别] 用于定义不同大小和不同颜色的内阴影
uts 用于定义文字阴影大小及阴影颜色
um-vp 定义body的内边距padding,外边距margin的大小以及文字大小可以调整,超过body宽度的部分隐藏
up 一般和um-vp搭配使用,用于定义页面大小自适应手机屏幕大小
<body class=’um-vp’><div class=’up’></div></body>
uh 和uf定义头部和底部的元素的一些基本属性
ut 定义头部和底部的内边距和外边距的大小
uf[类型] 定义元素的浮动方向
ulev[类别(数字)] 用于定义不同大小的字体,数值越大,字体越大
ulim 定义元素的最大宽度超过部分省略
uinl 用于定义元素为行内元素
uinn[类别(数字)] 用于定义内边距的大小(上下左右)
umh[类别(数字)] 用于定义不同大小的最大高度
umw[类别(数字)] 用于定义不同大小的最小宽度
ut-s 用于定义文本超过容器指定宽度时文字隐藏并且文字不换行
ub[类型(数字)] [类型(数字)] 边框 t l b r a
uhide 代表元素隐藏display属性为none
umar-[类型] 定意外边距的大小
uof-[类型] 内容溢出元素框时,超出的部分隐藏
uabs 定义元素位于页面的左上角

box

ub 定义元素的display属性为box(以下需要搭配ub使用)
ub-f[1~4] 定义不同的元素空间大小分配比例
ub-ac 元素垂直居中
ub-ae 元素位于底边
ub-pc 元素水平居中
ub-pe 元素位于末尾
ub-pj 元素两端对齐
ub-ver 定义元素垂直排列
ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化
ub-rev 定义元素排列方向
ub-fv 在box架构中ub-fv一般跟函数iScroll()搭配着使用实现纵向滑动效果
ub-img[类别(数字)] 用于定义不同的背景排列方式
ub-img1类别为1, 定义将背景图片等比例缩放到完全覆盖容器,背景图像有可能超过容器
ub-img2类别为2,定义背景图像横向平铺
ub-img3类别为3,定义背景图像纵向平铺
ub-img4类别为4,定义背景图像横向100%,纵向自适应;
ub-img5类别为5,定义背景图像横向自适应,纵向为100%
ub-img6类别为6,定义背景图像居中显示
color

bc-head类别: 基础header颜色;定义了header区域背景底色,在ui3.0框架中,IDE工具可以可视化配置
bc-bg类别: 基础body背景颜色; 定义了body背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg类别: 辅助控件背景颜色1; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-active类别: 辅助控件背景颜色2; 定义了辅助控件背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
sc-bg-alert类别: 警告背景色; 定义了header区域背景底色,在ui3.0框架中,IDE工具>插入控件,可视化配置
bc-btn 基础按钮颜色 应用的是主题颜色
sc-btn 辅助按钮颜色 应用的是主题颜色
bc-text 基础字体颜色 black
bc-text-head 基础标题字体颜色 white
sc-text 辅助字体颜色1 #848484
sc-text-active 辅助字体颜色2 应用的是主题颜色
sc-text-hint 辅助字体颜色3
sc-text-warn 辅助字体颜色4
sc-text-tab 辅助字体颜色5
bc-border 基础边框颜色 默认是#BABABA
sc-border 辅助边框颜色 默认是#FFFFFF
sc-border-tab 辅助边框颜色 应用的是主题颜色

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066892

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。