云服务器内容精选

  • 边框 设置组件的边框样式,支持全边框和角边框两种。 图2 全边框 图3 角边框 全边框 样式:设置组件边框的样式,如实线、点线、虚线和双实线。 宽度:设置边框的宽度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 角边框 宽度:设置组件边框的宽度,单位px。 长度:设置组件边框的长度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 边距:设置组件边框和图表之间的间距,单位px。
  • 设置数据系列 选择基本柱图组件,单击鼠标右键选择“高级设置”。 展开数据系列配置,单击旁边的“+”,添加数据系列。 图6 配置数据系列 在右侧“数据”页签,配置该数据系列的数据。 例如,在使用系统预置的静态数据基础上,添加如下加粗字体代码,配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "保洁", "安管", "工程", "绿化", "消杀", "特约" ], "dataValue": [{ "title": "工单总数", "value": [ 411, 965, 427, 630, 85, 800 ] }, { "title": "费用", "value": [ 500, 1065, 327, 730, 185, 1000 ] } ] } }] } 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示,柱状图上显示的数值对应上述静态数据中的数值。 设置完成后,单击“确定”。
  • 位置 距离左端:组件到页面左侧的距离,单位为px。 距离顶端:组件到页面顶部的距离,单位为px。 宽度:组件的宽度,单位为px。 高度:组件的高度,单位为px。 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。 自适应高度:组件的高度是否随宽度改变。 开启:勾选该按钮,下方可见页面适配功能。 页面适配:勾选页面适配下方的“开启”,表示组件开启自适应高度。该属性使页面其它位于其下方的组件,根据该组件的高度变化自动调整位置,一个页面只支持一个组件。
  • 高级设置 在高级设置中,可设置轮播时长、切换方式等。 图2 高级设置 轮播设置 切换方向:广告图片的轮播切换样式,支持横向滚动切换、右下角滚动切换和纵向滚动切换。 加载自动播放:是否自动轮播。开启后,支持设置图片轮播时间间隔(不大于24秒)。 切换方式:设置图片切换时,展示的样式,如淡出、推出等。 定位标志:设置分页图标样式。 图片管理:对图片进行管理,并支持为图片配置跳转链接。 单击“添加”,在“我的图片”页签中,将鼠标放在目录上,单击可新建目录,单击可删除该目录。单击“上传图片”,可上传图片,支持上传JPG、JPEG、PNG和GIF格式的图片,每张图片不超过1MB,推荐图片尺寸为800x800像素。在“网络图片”页签中,可以通过输入图片的地址,来获取图片。 选中图片,单击,可删除图片。 单击,可编辑图片跳转链接。
  • 位置 距离左端:组件到页面左侧的距离,单位为px。 距离顶端:组件到页面顶部的距离,单位为px。 宽度:组件的宽度,单位为px。 高度:组件的高度,单位为px。 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。 自适应高度:组件的高度是否随宽度改变。 开启:勾选该按钮,下方可见页面适配功能。 页面适配:勾选页面适配下方的“开启”,表示组件开启自适应高度。该属性使页面其它位于其下方的组件,根据该组件的高度变化自动调整位置,一个页面只支持一个组件。
  • 边框 设置组件的边框样式,支持全边框和角边框两种。 全边框 样式:设置组件边框的样式,如实线、点线、虚线和双实线。 宽度:设置边框的宽度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 角边框 宽度:设置组件边框的宽度,单位px。 长度:设置组件边框的长度,单位px。 颜色:设置组件边框的颜色。 弧度:设置组件边框四个角的弧度,单位px。 边距:设置组件边框和图表之间的间距,单位px。
  • 自定义布局样式 如果导航页面,想实现如下图所示布局效果,即整个页面不需要有滚动条,而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时,可参考如下步骤实现。 图12 自定义布局样式页面效果 在头部组件的“.css”样式文件中,指定头部组件的高度。 样例代码如下: #headerWidget { height: 90px; } 参考基于预置组件进行自定义中操作,下载预置组件路由导航(示例),解压global_NavigatorWidget_版本号.zip。 修改解压后的“Navigator_Widget.css”文件,该文件是Widget的样式文件,在该文件中编写Widget的css样式。 样例代码如下: html[app=desktop] body { overflow: hidden; } #navigatorWidget, #global_RouterViewWidget { height: calc(100% - 90px); overflow: scroll; } 将修改后的头部组件和组件路由导航组件文件,重新打成zip包。 参考基于预置组件进行自定义中操作,上传重新打包后的组件。 在高级页面设计器左上方,单击,拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的,保存页面。 保存成功后,单击,发布页面。 发布成功后,单击,可查看页面效果。