AppCan-UI-Class参考

DEV文档 开发文档 APP UI css文档目录ui-bar1.ui-bar-a2.ui-bar-b3.ui-bar-c4.ui-bar-d5.ui-bar-e6.ui-bar-glass设置渐变条的边框，字体颜色，字体阴影等效果 1.ui-bar-a说明表示有1px边框的颜色渐变条，字体颜色，加粗有阴影的效果 代码示例Title 图例2.ui-bar-b说明表示有1px边框的颜色渐变条，字体颜色，加粗有阴影的效果 代码示例Title 图例3.ui-bar-c说明表示有1px边框的颜色渐变条，字体颜色，加粗有阴影的效果 代码示例Title 图例4.ui-bar-d说明表示有1px边框的颜色渐变条，字体颜色，加粗有阴影的效果 代码示例Title 图例5.ui-bar-e说明表示有1px边框的颜色渐变条，字体颜色，加粗有阴影的效果 代码示例Title 图例6.ui-bar-glass说明表示从0%的0.25透明的白色到50%的0.25透明白色到50%的全透明100%的全透明的渐变色，类似于半透白色的玻璃罩效果 代码示例第一页 图例6.其他关联不同效果的渐变条ui-bar-a,ui-bar-a input,ui-bar-a select,ui-bar-a textarea,ui-bar-a buttonui-bar-a .ui-link-inheritui-bar-a .ui-link目录ui-body1.ui-body-a2.ui-body-b3.ui-body-c4.ui-body-d5.ui-body-e设置某区域样式 1.ui-body-a说明设置某区域的样式：背景颜色渐变，有实线边框，区域内的字体标准并且字体颜色带阴影等样式，如下图 代码示例ui-body-a图例2.ui-body-b说明设置某区域的样式：背景颜色渐变，有实线边框，区域内的字体标准并且字体颜色带阴影等样式，如下图 代码示例ui-body-b图例3.ui-body-c说明设置某区域的样式：背景颜色渐变，有实线边框，区域内的字体标准并且字体颜色带阴影等样式，如下图 代码示例ui-body-c图例4.ui-body-d说明设置某区域的样式：背景颜色渐变，有实线边框，区域内的字体标准并且字体颜色带阴影等样式，如下图 代码示例ui-body-d图例5.ui-body-e说明设置某区域的样式：背景颜色渐变，有实线边框，区域内的字体标准并且字体颜色带阴影等样式，如下图 代码示例ui-body-e图例6.其他关联.ui-body-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button.ui-body-a .ui-link-inherit .ui-body-a .ui-link目录ui-btn1.ui-btn-a,ui-btn-b,ui-btn-c,ui-btn-d,ui-btn-e2.其他相关联类设置页面中按钮样式 1.ui-btn-a,ui-btn-b,ui-btn-c,ui-btn-d,ui-btn-e说明ui-btn-a可以设置按钮的边框样式、边框颜色和宽度，按钮的背景，按钮中字体颜色、字体阴影等样式以上五种类名给出了不同背景颜色的按钮示例，如下图例中 代码示例按钮图例其他相关类不同类名组合可以实现各位置处（如header，footer，bar）按钮的不同风格样式，详细如下 .ui-btn：设置按钮的样式 .ui-btn:focus,.ui-btn:active：按钮聚焦外轮廓为0 .ui-header .ui-btn,.ui-footer .ui-btn,.ui-bar .ui-btn：header，footer，bar中的按钮样式 .ui-btn-limit：按钮的最大宽度为5em .ui-btn-inline：按钮显示为行内属性 .ui-btn-inner：按钮内部的样式 .ui-header .ui-btn-inner,.ui-footer .ui-btn-inner,.ui-bar .ui-btn-inner：按钮在header，footer，bar中的内边距样式 .ui-block-auto .ui-btn-thumb-notext,.ui-block-a .ui-btn-thumb-notext,.ui-block-b .ui-btn-thumb-notext,.ui-block-c .ui-btn-thumb-notext,.ui-block-d .ui-btn-thumb-notext,.ui-block-e .ui-btn-thumb-notext,.ui-block-f .ui-btn-thumb-notext:图片按钮在网格中的样式布局 .ui-btn-thumb-notext .ui-btn-inner：无文本的图片按钮内边距样式 .ui-btn-thumb-notext：无文本的图片按钮内边距样式 .ui-btn-thumb-notext .ui-btn-text：图片按钮无文本的文本按钮位置 .ui-btn-icon-notext：只有icon，无文本的按钮样式 .ui-btn-icon-notext .ui-btn-inner：icon按钮距内边距的样式 .ui-btn-icon-notext .ui-btn-text：icon按钮无文本的文本按钮位置 .ui-btn-icon-left .ui-btn-inner：icon按钮的左边内边距位置 .ui-header .ui-btn-icon-left .ui-btn-inner,.ui-footer .ui-btn-icon-left .ui-btn-inner,.ui-bar .ui-btn-icon-left .ui-btn-inner：icon按钮在header，footer，bar中的左边内边距位置 .ui-btn-icon-right .ui-btn-inner：icon按钮距右边距的内部样式 .ui-header .ui-btn-icon-right .ui-btn-inner,.ui-footer .ui-btn-icon-right .ui-btn-inner,.ui-bar .ui-btn-icon-right .ui-btn-inner：icon按钮在header，footer，bar中的右边内边距位置 .ui-btn-icon-top .ui-btn-inner：带icon的按钮距上边内边距的位置 .ui-btn-thumb .ui-btn-inner：图片按钮距上边内边距的位置 .ui-header .ui-btn-icon-top .ui-btn-inner,.ui-footer .ui-btn-icon-top .ui-btn-inner,.ui-bar .ui-btn-icon-top .ui-btn-inner：带icon图标位于顶部位置的按钮在header，footer，bar中的上内边距位置 .ui-btn-icon-bottom .ui-btn-inner：带icon图标位于底部位置的按钮在底部内边距位置 .ui-header .ui-btn-icon-bottom .ui-btn-inner,.ui-footer .ui-btn-icon-bottom .ui-btn-inner,.ui-bar .ui-btn-icon-bottom .ui-btn-inner：带icon图标位于底部位置的按钮在header，footer，bar中的下内边距位置 .ui-btn-icon-notext .ui-icon：无文本的icon按钮呈显示状态 .ui-btn-icon-left .ui-icon,.ui-btn-icon-right .ui-icon：带icon分别位于左右位置的按钮的绝对定位及距上边的位置 .ui-btn-icon-top .ui-icon,.ui-btn-icon-bottom .ui-icon,.ui-btn-icon-notextcenter .ui-icon：icon按钮距上边，下边，无文本时的按钮的绝对定位及距左边的位置 .ui-btn-icon-left .ui-icon：icon位于左边的按钮距左边的位置 .ui-btn-icon-right .ui-icon：icon位于右边的按钮距右边的位置 .ui-header .ui-btn-icon-left .ui-icon,.ui-footer .ui-btn-icon-left .ui-icon,.ui-bar .ui-btn-icon-left .ui-icon：icon位于左边的按钮在header，footer，bar中距左边的位置 .ui-header .ui-btn-icon-right .ui-icon,.ui-footer .ui-btn-icon-right .ui-icon,.ui-bar .ui-btn-icon-right .ui-icon：icon位于右边的按钮在header，footer，bar中距右边的位置 .ui-header .ui-btn-icon-top .ui-icon,.ui-footer .ui-btn-icon-top .ui-icon,.ui-bar .ui-btn-icon-top .ui-icon：icon位于顶部的按钮在header，footer，bar中距顶部的位置 .ui-header .ui-btn-icon-bottom .ui-icon,.ui-footer .ui-btn-icon-bottom .ui-icon,.ui-bar .ui-btn-icon-bottom .ui-icon：icon位于底部的按钮在header，footer，bar中距底部的位置 .ui-btn-icon-top .ui-icon：icon位于顶部的按钮距顶部的位置 .ui-btn-icon-bottom .ui-icon：icon位于底部的按钮距底部的位置 .ui-btn-hidden：按钮隐藏 .ui-btn-icon-notextcenter .ui-icon：没有文本的按钮的icon位置 .ui-btn-icon-notextcenter：无文本的icon按钮高度为1em,内边距上下为0.7em,左右为0.5em 设置圆角大小 1.ui-corner-all说明四个位置都设置圆角大小（大圆角），如下图例 代码示例按钮图例其他相关类每个位置可以单独设置圆角大小（大圆角） .ui-corner-tl：上左圆角样式 .ui-corner-tr：上右圆角样式 .ui-corner-bl：下左圆角样式 .ui-corner-br：下右圆角样式 .ui-corner-top：上圆角样式 .ui-corner-bottom：下圆角样式 .ui-corner-right：右圆角样式 .ui-corner-left：左圆角样式 .ui-corner-all：全圆角样式 2.ui-btn-corner-all说明四个位置都设置圆角大小（小圆角），如下图例 代码示例按钮图例其他相关类每个位置可以单独设置圆角大小（小圆角） .ui-btn-corner-tl：上左小圆角样式 .ui-btn-corner-tr：上右小圆角样式 .ui-btn-corner-bl：下左小圆角样式 .ui-btn-corner-br：下右小圆角样式 .ui-btn-corner-top：上小圆角样式 .ui-btn-corner-bottom：下小圆角样式 .ui-btn-corner-right：右小圆角样式 .ui-btn-corner-left：左小圆角样式 .ui-btn-corner-all：小圆角样式 .ui-corner-tl,.ui-corner-tr,.ui-corner-bl,.ui-corner-br,.ui-corner-top,.ui-corner-bottom,.ui-corner-right,.ui-corner-left,.ui-corner-all,.ui-btn-corner-tl,.ui-btn-corner-tr,.ui-btn-corner-bl,.ui-btn-corner-br,.ui-btn-corner-top,.ui-btn-corner-bottom,.ui-btn-corner-right,.ui-btn-corner-left,.ui-btn-corner-all：背景显示范围 icon小图标 1.ui-icon说明设置icon图标的背景颜色，背景的width值和height值，icon图标的宽高，圆角icon，icon图标背景的透明度等样式 代码示例按钮按钮按钮图例其他相关类如下类设置了页面中常用的icon图标 .ui-icon-plus：加号icon .ui-icon-minus：减号icon .ui-icon-delete：删除icon .ui-icon-arrow-r：右箭头icon .ui-icon-arror-l：左箭头icon .ui-icon-arrow-u：上箭头icon .ui-icon-arrow-d：下箭头icon .ui-icon-check：选中icon .ui-icon-gear：齿轮icon .ui-icon-refresh：刷新icon .ui-icon-forward：前进icon .ui-icon-back：返回icon .ui-icon-grid：网格icon .ui-icon-star：星星icon .ui-icon-alert：警示icon .ui-icon-info：信息icon .ui-icon-home：主页icon .ui-icon-search：搜索icon .ui-icon-checkbox-off：复选框未选中状态icon .ui-icon-checkbox-on：复选框已选中状态icon .ui-icon-radio-off：单选框未选中状态icon .ui-icon-radio-on：单选框选中状态icon .ui-icon-searchfield：加在input框内的搜索icon .ui-icon-shadow：icon阴影 目录1.ui-thumb区块中插入的背景图片的样式 1.ui-thumb说明声明一个插入的背景图片及位置的样式 代码示例图例2.其他相关联类.ui-btn-thumb-notext .ui-thumb：表示没有文本时的背景图片的位置和高度的样式 图例3.其他关于thumb的图片按钮的相关联类可查询ui-btn页面内容设置单选框，复选框的样式 1.ui-checkbox说明表示checkbox的排列方式及样式 代码示例(多个复选框形成的组成垂直排列)itemitemitem图例代码示例(多个复选框形成的组成水平排列)itemitemitem图例1.ui-radio说明表示radio的排列方式及样式 代码示例(多个单选框形成的组成垂直排列)itemitem图例代码示例(多个单选框形成的组成水平排列)itemitem图例其他相关类单选框，复选框的详细样式 .ui-checkbox .ui-btn,.ui-radio .ui-btn：单选框，复选框的按钮位置 .ui-checkbox .ui-btn-inner,.ui-radio .ui-btn-inner：单选框复选框的按钮元素内的空白符为标准的 .ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner：单选框复选框的按钮icon在左边的左内边距为45px .ui-checkbox .ui-btn-icon-right .ui-btn-inner,.ui-radio .ui-btn-icon-right .ui-btn-inner：单选框复选框的按钮icon在右边的右内边距为45px .ui-checkbox .ui-icon,.ui-radio .ui-icon：单选框，复选框的icon的top位置为1.1em .ui-checkbox .ui-btn-icon-left .ui-icon,.ui-radio .ui-btn-icon-left .ui-icon：单选框，复选框的icon的在left位置为15px .ui-checkbox .ui-btn-icon-right .ui-icon,.ui-radio .ui-btn-icon-right .ui-icon：单选框，复选框的icon的在right位置为15px .ui-checkbox input,.ui-radio input：单选框，复选框的input样式 inputtype=checkbox+labellabel.ui-icon-checkbox：复选框初始状态下的icon的背景图片及背景颜色 inputtype=checkbox:checked+labellabel.ui-icon-checkbox：复选框被checked的状态下的icon的背景图片及背景颜色 inputtype=radio+labellabel.ui-icon-radio：单选框初始状态下的icon的背景图片及背景颜色 inputtype=radio:checked+labellabel.ui-icon-radio：单选框被checked的状态下的icon的背景图片及背景颜色 inputtype=checkbox+label.ui-checkbox-status：复选框初始状态下的背景颜色为透明 inputtype=checkbox:checked+label.ui-checkbox-status：复选框被checked状态下的样式 inputtype=radio+label.ui-radio-status：单选框初始状态下的背景颜色为透明 inputtype=radio:checked+label.ui-radio-status：单选框被checked状态下的样式 .ui-icon-checkbox-off,.ui-icon-radio-off：复选框，单选框的off背景 .ui-icon-checkbox-on,.ui-checkbox-on .ui-icon,.ui-radio-on .ui-icon：单选框，复选框的on状态的背景 页面中阴影的样式 1.ui-shadow说明外阴影样式 代码示例按钮图例2.ui-shadow-inset说明内阴影样式 代码示例图例2.ui-icon-shadow说明icon阴影样式 代码示例按钮 图例1.ui-mobile-viewport说明在body中使用的类，声明页面整体的样式 代码示例2.ui-page说明内容区域使用的类，声明整体的页面布局及样式 代码示例3.ui-mobile .ui-page-activ