关于APPCAN的UI基础框架的定义，说明，场景和例子

傷城~ 2022-06-06 06:20 187阅读 0赞

资料全是在appcan官网上手动copy下来的，可信度为true 例子都是可以拿去预览的。

主要是我网上搜索api的时候不是乱七八糟的

就是真真假假的，很烦。

所以花了点时间整理了一下资料，大家放心使用

谢谢！

ub 元素采用弹性BOX布局

ub-rev 子元素反序排列  
ub-con 在子元素中加入一个容器，用于避免内容引起子元素大小变化  
对应CSS代码为position:absolute;width:100%;height:100%;  
ub-ac、ub-ae 子元素垂直居中对齐和尾对齐  
ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐  
ub-ver 子元素纵向排列  
ub-f1 ub-f2 ub-f3 ub-f4 子元素占用区域份数  
CSS Variables  
BASE  
1、圆角类别  
定义：  
uc-\[类型\]\[类型\]\[类别\]......  
说明：  
前缀为uc-，代表UI CORNER  
类型为t带表TOP，l代表LEFT，b代表BOTTOM，r代表RIGHT，a代表ALL

类别为数字编号，用于定义不同大小的圆角

例子：  
uc-t代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.6em的圆角  
uc-tl代表左上圆角。类别为空，定义的为圆角半径为0.6em的圆角  
uc-t1代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.3em的圆角  
场景：  
<div class='btn uba b-bla uinn5 c-blu c-m1 uc-a t-wh'>确定</div>  
  
  
2、外阴影类别  
定义：  
us\[类别\]......  
说明：  
前缀为us，代表UI SHADOW  
类别为数字编号，用于定义不同大小和不同颜色的外阴影  
例子：  
us代表外阴影。类别为空，定义的外阴影颜色为黑色  
us1代表外阴影。类别为1，定义外阴影颜色为灰白色  
场景：  
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh us'>确定</div>  
  
  
3、内阴影类别  
定义：  
us-i\[类别\]......  
说明：  
前缀为us-i，代表UI SHADOW INSET  
类别为数字编号，用于定义不同大小和不同颜色的内阴影  
例子：  
us-i代表内阴影。类别为空，定义内阴影大小及阴影颜色为黑色  
场景：  
<div class='btn uba b-bla uinn5 c-blu2 c-m1 uc-a t-wh us-i'>确定</div>  
  
  
4、文字阴影  
定义：  
uts......  
说明：  
用于定义文字的阴影效果  
例子：  
uts代表内阴影。定义文字阴影大小及阴影颜色  
场景：  
<div class='btn uba uc-a b-bla uinn5 c-blu2 c-m1 t-wh uts'>确定</div>  
  
  
5、body样式  
定义：  
um-vp......  
说明：  
um-vp代表UI MOBILE VIEWPORT  
um-vp定义body的内边距padding，外边距margin的大小以及文字大小可以调整，超过body宽度的部分隐藏  
场景：  
<body class='um-vp'></body>  
  
  
6、页面样式  
定义：  
up......  
说明：  
up，代表UI PAGE  
up一般和um-vp搭配使用，用于定义页面大小自适应手机屏幕大小  
场景：  
<body class='um-vp'><div class='up'></div></body>  
  
  
7、跟头部和底部有关的样式  
定义：  
.uh,.uf  
.up .uh,.up .uf  
说明：  
uh，代表UI HEADER  
uf，代表UI FOOTER  
uh和uf定义头部和底部的元素的一些基本属性  
场景：  
<div id='page\_0' class='up ub ub-ver' tabindex='0'>  
  
<div id='header' class='uh c-org c-m1 t-wh'>  
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>  
</div>  
  
  
  
  
8、头部和底部内文本区域的样式  
定义：  
.ut......  
说明：  
ut，代表UI TITLE  
定义头部和底部的内边距和外边距的大小  
场景：  
<div id='header' class='uh c-org c-m1 t-wh'>  
<h1 class='ut ulev0 ut-s tx-c' tabindex='0'>AppCan</h1>  
</div>  
<div id='footer' class='uf c-m2 c-bla t-wh'>  
<h1 class='ut ulev-2 tx-c' tabindex='0'>  
(c) Copyright 3G2WIN and others 2011.  
<br>  
All rights reserved.  
</h1>  
</div>  
  
  
9、浮动类别  
定义：  
uf\[类型\]......  
说明：  
前缀为uf，代表UI FLOAT  
类型为l代表LEFT，r代表RIGHT  
用于定义元素的浮动方向  
例子：  
ufl代表元素左浮动

ufr代表元素右浮动

10、字体大小类别  
定义：  
ulev\[类别\]......  
说明：  
前缀为ulev  
类别为数字编号，用于定义不同大小的字体；其中数值越大代表字体大小越大，数值越小代表字体大小越小  
例子：  
ulev0类别为0，定义的字体大小为1em  
ulev1类别为1，定义的字体大小为1.2em  
ulev-1类别为-1，定义的字体大小为0.8em  
场景：  
<div class=' ulev2 uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>  
<div class=' ulev-1 uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>  
<div id='content' class='ub-f1 tx-l uinn2 t-bla ub-img6 res10'>  
</div>  
  
  
<div id='footer' class='uf c-m2 c-bla t-wh'>  
<h1 class='ut ulev-2 tx-c' tabindex='0'>(c) Copyright 3G2WIN and others 2011.  
<br>  
All rights reserved.  
</h1>  
</div>  
  
</div>  
  
  
11、限制宽度大小  
  
定义：  
ulim......  
说明：  
ulim定义元素的最大宽度超过部分省略  
场景：  
<div class=' ulim ulev-1 uinn5 c-blu c-m1 uc-a1 tx-c t-wh'>确定确定确定确定确定确定</div>  
  
  
12、单行类别  
  
定义：  
uinl......  
说明：  
用于定义元素为行内元素  
场景：  
<div class='btn uba b-bla uinn2 uinl c-blu c-m1 uc-a t-wh'>确定</div>  
  
  
13、内边距类别  
  
定义：  
uinn\[类别\]......  
说明：  
前缀为uinn  
类别为数字编号，用于定义不同内边距的大小  
例子：  
uinn类别为空，定义的内边距大小上右下左均为0.5em  
uinn1类别为1，定义的内边距大小上下为0，左右为0.5em  
场景：  
<div class='btn uba b-bla uinn c-blu c-m1 uc-a t-wh'>确定</div>  
  
  
14、最小高度类别  
  
定义：  
umh\[类别\]......  
说明：  
前缀为umh  
类别为数字编号，用于定义不同大小的最小高度  
例子：  
umh1类别为1，定义最小高度为1em  
umh2类别为2，定义最小高度为1.2em  
场景：  
<div class=' tx-c umh1 uinn c-bla c-m1 uc-a t-wh'>确定</div>  
  
  
15、最小宽度类别  
  
定义：  
umw\[类别\]......  
说明：  
前缀为umw  
类别为数字编号，用于定义不同大小的最小宽度  
例子：  
umw1类别为1，定义最小宽度为1em  
umw2类别为2，定义最小宽度为2em  
场景：

16、文字对齐方向  
  
定义：  
tx-\[类型\]......  
说明：  
前缀为tx-  
类型为l代表LETT,r代表RIGHT,c代表CENTER  
用于定义文字的对齐方向  
例子：  
tx-l代表左对齐  
tx-r代表右对齐  
tx-c代表居中对齐  
场景：  
<div class=' uinn c-blu2 c-m1 uc-a1 tx-l t-wh'>确定</div>  
  
  
17、超出指定宽度隐藏并且文字不换行  
  
定义：  
ut-s......  
说明：  
用于定义文字超过容器指定宽度时文字隐藏并且文字不换行  
场景：  
<div class='uinn c-blu2 c-m1 uc-a1 tx-c ut-s t-wh' style='width:5em;'>确定确定确定确定</div>  
  
  
18、边框类别  
  
定义：  
ub\[类型\] \[类别\]......  
说明：  
前缀为ub  
类型为t带表TOP，l代表LEFT，b代表BOTTOM，r代表RIGHT，a代表ALL  
类别为数字编号，用于定义不同大小的边框  
例子：  
ubt代表上边框。类别为空，定义的边框宽度为1px  
ubl代表左边框。类别为空，定义的为边框宽度为1px  
uba代表四个边的边框。类别为空，定义的边框宽度为1px  
uba1代表四个边的边框。类别为1，定义的边框宽度为2px  
场景：  
<div class='uba b-bla uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>  
<div class='uba1 b-bla uinn c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>  
  
  
19、 隐藏元素  
  
定义：  
uhide......  
说明：  
代表元素隐藏display属性为none  
场景：  
<div class='uhide '>确定</div>  
  
  
20、外边距类别  
  
定义：  
umar-\[类型\]......  
说明：  
定义外边距的大小  
类型为t代表TOP定义上边距大小， b代表BOTTOM定义下边距大小，l代表LEFT定义左边距大小，r代表RIGHT定义右边距大小，a代表ALL定义上、下、左、右四个方向的边距大小  
例子：  
umar-t代表上边距。定义的上边距的大小为margin-top：0.4em  
umar-b代表下边距。定义的下边距的大小margin-bottom:0.4em  
umar-l代表左边距。定义的下边距的大小margin-left:0.4em  
umar-r代表右边距。定义的右边距的大小margin-right:0.4em  
umar-a代表上下左右四个边的边距。定义margin：0.4em  
场景：  
<div class='btn b-bla uba uinn5 c-blu c-m1 uc-a1 tx-c t-wh'>确定</div>  
<div class='btn uba b-bla umar-t uinn5 c-blu c-m1 uc-a1 t-wh'>确定</div>  
  
  
21、内容溢出元素框时，超出的部分隐藏  
  
定义：  
uof-\[类型\]......  
说明：  
uof-x：类型为x时，定义oveflow-x：hidden；超出容器的指定宽度时，横向超出的部分隐藏  
uof-y：类型为y时，定义oveflow-y：hidden；超出容器的指定高度时，纵向超出的部分隐藏

uof：类型为空时，定义overflow：hidden；内容溢出元素框时，溢出的部分隐藏

22、定位元素  
  
定义：  
uabs......  
说明：  
定义元素位于页面的左上角，position:absolute;left:0px; top:0px;  
  
  
  
BOX  
  
1、Box架构  
定义：  
ub......  
说明：  
使用box弹性盒子模式对页面进行布局  
例子：  
ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间，ub一般跟ub-f\[1-4\]搭配着使用  
  
  
2、Box架构元素空间大小分配比例  
  
定义：  
ub-f......  
说明：  
定义不同的box-flex属性值  
类别使用数字编号，定义不同的元素空间大小分配比例  
例子：  
ub-f1数字编号为1；定义box-flex：1  
ub-f1数字编号为2；定义box-flex：2  
ub-f1数字编号为3；定义box-flex：3  
ub-f1数字编号为4；定义box-flex：4  
ub-f\[1-4\]和ub搭配着使用  
解析：  
1、若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小  
<div class='ub c-gra uba b-bla umh5'>  
 <div class='ub-f1 sc-bg-alert'></div>  
 <div class='ub-f1 bc-head'></div>  
</div>  
2、若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小  
<div class='ub c-gra uba b-bla umh5'>  
 <div class='ub-f1 sc-bg-alert'></div>  
 <div class='ub-f2 bc-head'></div>  
</div>  
3、若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小  
<div class='ub c-gra uba b-bla umh5'>  
 <div class='ub-f1 sc-bg-alert'></div>  
 <div class='ub-f2 bc-head'></div>  
 <div class='ub-f3 sc-bg-active'></div>  
</div>  
4、若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小  
<div class='ub c-gra uba b-bla umh5'>  
 <div class='sc-bg-alert'>内容</div>  
 <div class='ub-f1 bc-head'></div>  
</div>  
ub-f\[1-4\]和ub搭配着使用  
场景：  
<div class='uba b-gra c-wh us uc-a '>  
<div ontouchstart='zy\_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis umh4'>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
<div ontouchstart='zy\_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis umh4'>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
<div ontouchstart='zy\_touch('btn-act')' class='uc-b ub t-bla ub-ac lis umh4'>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
</div>  
  
  
3、Box架构元素垂直方向的位置排列  
  
定义：  
ub-ac，ub-ae......  
说明：  
ub-ac：垂直居中  
ub-ae：位于底边  
只有跟ub搭配着使用ub-ac，ub-ae的作用才生效  
例子：  
1、未使用ub-ac，ub-ae  
<div class='ub uinn umh4 uba b-gra uc-a'>  
 <div class='ub-f1'>内容</div>  
 <div class='res8 lis-sw ub-img'></div>  
</div>  
2、使用ub-ac  
<div class='ub uinn umh4 uba b-gra uc-a ub-ac'>  
 <div class='ub-f1'>内容</div>  
 <div class='res8 lis-sw ub-img'></div>  
</div>  
3、使用ub-ae  
<div class='ub uinn umh4 uba b-gra uc-a ub-ae'>  
 <div class='ub-f1'>内容</div>  
 <div class='res8 lis-sw ub-img'></div>  
</div>  
场景：  
<div class='uba b-gra c-wh us uc-a '>  
 <div ontouchstart='zy\_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>  
 <div class='lis-icon ub-img im'></div>  
 <div class='ub-f1 ut-s'>设置</div>  
 <div class='tx-r t-blu ulev-1'>Old Phone</div>  
 <div class='res8 lis-sw ub-img'>></div>  
 </div>  
 <div ontouchstart='zy\_touch('btn-act')' class=' ub ubb b-grat-bla ub-ac lis'>  
 <div class='lis-icon ub-img im'></div>  
 <div class='ub-f1 ut-s'>设置</div>  
 <div class='tx-r t-blu ulev-1'>Old Phone</div>  
 <div class='res8 lis-sw ub-img'></div>  
 </div>  
 <div ontouchstart='zy\_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>  
 <div class='lis-icon ub-img im'></div>  
 <div class='ub-f1 ut-s'>设置</div>  
 <div class='tx-r t-blu ulev-1'>Old Phone</div>  
 <div class='res8 lis-sw ub-img'></div>  
</div>  
 </div>

4、Box架构元素水平方向的位置排列  
  
定义：  
ub-pc，ub-pe，ub-pj......  
说明：  
ub-pc：水平居中  
ub-pe：位于末尾  
ub-pj：两端对齐  
只有跟ub搭配着使用ub-pc，ub-pe，ub-pj的作用才生效  
例子：  
1、未使用ub-pc，ub-pe，ub-pj  
<div class='uinn2 c-gra ub'> <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
2、使用ub-pc  
<div class='uinn2 c-gra ub-pc ub uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
3、使用ub-pe  
<div class='uinn2 c-gra ub-pe ub uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
4、使用ub-pj  
<div class='uinn2 c-gra ub-pj ub uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>

5、Box架构元素垂直排列  
  
定义：  
ub-ver....  
说明：  
ub-ver：定义元素垂直排列  
只有跟ub搭配着使用ub-ver的作用才生效  
例子：  
1、未使用ub-ver  
<div class='uinn2 c-gra ub uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
2、使用ub-ver  
<div class='uinn2 c-gra ub ub-ver uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
  
  
6、Box架构元素排列方向  
  
定义：  
ub-rev......  
说明：  
ub-rev：定义元素排列方向  
只有跟ub搭配着使用ub-rev的作用才生效  
例子：  
1、未使用ub-rev  
<div class='uinn2 c-gra ub uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>  
</div>  
2、使用ub-rev  
<div class='uinn2 c-gra ub ub-rev uba b-bla'>  
 <div class='umh5 umw3 sc-bg-alert'></div>  
 <div class='umh5 umw3 bc-head'></div>  
 <div class='umh5 umw3 sc-bg-active'></div>

</div>

7、Box架构实现横向滑动效果  
  
定义：  
ub-fh......  
说明：  
在box架构中ub-fh一般跟函数zyFlip（）搭配着使用实现横向滑动效果  
  
  
8、Box架构实现纵向滑动效果  
  
定义：  
ub-fv......  
说明：  
在box架构中ub-fv一般跟函数iScroll（）搭配着使用实现纵向滑动效果  
  
  
9、背景图片类别  
  
定义：  
ub-img\[类别\]......  
说明：  
前缀为ub-img  
类别为数字编号，用于定义不同的背景排列方式  
例子：  
ub-img类别为空，定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终包含在容器内  
ub-img1类别为1，定义将背景图片等比例缩放到完全覆盖容器，背景图像有可能超过容器  
ub-img2类别为2，定义背景图像横向平铺  
ub-img3类别为3，定义背景图像纵向平铺  
ub-img4类别为4，定义背景图像横向100%，纵向自适应;  
ub-img5类别为5，定义背景图像横向自适应，纵向为100%  
ub-img6类别为6，定义背景图像居中显示  
场景：  
<div class='uba b-gra c-wh us uc-a '>  
<div ontouchstart='zy\_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>  
<div class='lis-icon ub-img im'></div>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
<div ontouchstart='zy\_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis'>  
<div class='lis-icon ub-img im'></div>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
<div ontouchstart='zy\_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>  
<div class='lis-icon ub-img im'></div>  
<div class='ub-f1 ut-s'>设置</div>  
<div class='tx-r t-blu ulev-1'>Old Phone</div>  
<div class='res8 lis-sw ub-img'></div>  
</div>  
</div>  
  
  
  
  
color  
  
  
1、背景色类别  
  
定义：  
bc-head  
bc-bg  
sc-bg  
sc-bg-active  
sc-bg-alert  
说明：  
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工具>插入控件,可视化配置  
例子：  
  
            <div id="header" class="uh bc-text-head ub bc-head"></div>

2、按钮颜色类别  
  
定义：  
bc-btn  
sc-btn  
说明：  
bc-btn 基础按钮颜色 应用的是主题颜色  
sc-btn 辅助按钮颜色 应用的是主题颜色  
类别分别用于定义不同颜色值,默认提供的字体颜色可以自己灵活应用,也可自定义  
场景：  
ui-color.css中 鼠标定位颜色属性上可查看颜色  
例子：  
<div class='btn ub ub-ac bc-text-head ub-pc bc-btn'>确定</div>  
  
  
3、文字色彩类别  
  
定义：  
bc-text  
bc-text-head  
sc-text  
sc-text-active  
sc-text-hint  
sc-text-warn  
sc-text-tab  
说明：  
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  
类别分别用于定义不同色彩，默认提供的字体颜色可以自己灵活应用,也可自定义  
例子：  
<div class= "btn ub ub-ac bc-text-head ub-pc bc-btn " id="btn">无图片按钮</div>  
  
  
4、边框色彩类别  
  
定义：  
bc-border  
sc-border  
sc-border-tab  
说明：  
bc-border 基础边框颜色 默认是\#BABABA  
sc-border 辅助边框颜色 默认是\#FFFFFF  
sc-border-tab 辅助边框颜色 应用的是主题颜色  
类别分别用于定义不同色彩， 默认提供的边框颜色可以自己灵活应用,也可自定义  
场景：  
ui-color.css中 鼠标定位颜色属性上可查看颜色  
例子：  
<div id="listview"class="ubt bc-border sc-bg"> </div>