检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。下面以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。 商品列表组件可以应用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。如图1中呈现的效果，屏幕或浏览器可视
弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。 背景 样式：设置背景的样式，如普通、居中、拉伸等。
背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：为轮播组件添加图片，当前仅支持添加JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不能超过50MB，尺寸建议使用800 x 800像素。 颜色：设置组件的背景颜色。 高级设置 选中雷达图组件，单击鼠标右键选择“高级设置”，可对雷达图进行多种配置。
个不同尺寸的终端中此页面的呈现效果。 按下“F12”，单击开发者工具中的，可以切换设备（手机、iPad等），查看组件响应式效果。多个终端（响应式模式、iPhone 6/7/8和iPad横屏）视图效果如图7所示，呈现出多终端适配的响应式效果。 在分辨率为1797x425的电脑端中，商品列表单行商品数为5。
背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：为轮播组件添加图片，当前仅支持添加JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不能超过50MB，尺寸建议使用800 x 800像素。 颜色：设置组件的背景颜色。 高级设置 选中基本折线图组件，单击鼠标右键
放公网和私网，有部分应用只允许私网访问。 如果设置了某域名不允许访问某应用，则该应用下的所有页面、接口都不允许在这个域名下访问。 配置业务应用的登录页。 默认登录页：使用AstroZero提供的默认登录页，作为业务应用的登录页。可单击“上传Logo”下方的和“自定义背景图片”下方
背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：为轮播组件添加图片，当前仅支持添加JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不能超过50MB，尺寸建议使用800 x 800像素。 颜色：设置组件的背景颜色。 高级设置 选中翻牌器组件，单击鼠标右键选择
在属性中，设置文本组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。
弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。 背景 样式：设置背景的样式，如普通、居中、拉伸等。
配置完应用的主页导航菜单后，单击页面上方的“运行 > 立即运行”，可预览效果。 主导航其它设置。 在主导航设置页签，单击“其它设置”，可以设置应用的初始页和选择移动端底部导航的常驻菜单。 图3 主导航其它设置 设置应用的初始页，适用于加载应用的初始页，非导航菜单中的页面。 第一个菜单：默认选中“第一个菜单”。
背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：为轮播组件添加图片，当前仅支持添加JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不能超过50MB，尺寸建议使用800 x 800像素。 颜色：设置组件的背景颜色。 高级设置 选中散点图组件，单击鼠标右键选择
其他组件。 表单：具有数据收集、校验和提交功能的表单，通常用于制作带数据的交易类页面。 表格/表格(新)：主要用于展示大量结构化的数据，使用时需要通过数据绑定数据模型。适用于通过一个表格，完成数据对象的增、删、改、查的操作场景。 容器：基本的布局容器，支持拖拽放置任何组件进去，按
上述代码中定义的展示图片文件可使用其他图片代替，将图片放到DisplayWidget目录中即可正常使用。 本示例代码中，widgetBasePath变量为组件包上传后的路径，在组件模板中已包含获取此变量的逻辑，在此直接使用即可（此例也展示了组件中如何引入本地图片的基本方法）。 在
在左侧面板中，将“图片”组件拖至中间面板“标题”组件下方，并在右侧边板设置图片地址（/besBaas/images/banner.png），设置图片高度为“165px”，宽度为“100%”。 图13 将“图片”组件拖至中间面板 图14 设置图片地址 图15 设置图片样式 在左侧面板
全局高级组件 轮播 图片 文本 自定义背景框 基本柱图 基本折线图 基本饼图 水位图 散点图 雷达图 仪表盘 翻牌器 路由导航和路由视图 父主题： 高级页面
新增视图自定义筛选条件、冻结表格列、数据公开查询能力。 新增表单设置唯一索引能力。 优化富文本组件，支持调整上传图片大小。 优化数据标题，支持自定义文字内容。 优化周期填报的配置能力，支持更灵活的场景配置。 优化表单组件的默认值能力。 优化零代码菜单能力，支持通过iframe嵌套其他页面作为菜单。 优化组件取色笔能力，支持自定义颜色。
设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。
散点图：使用气泡形状，来展现数据的大小分布情况，包括散点图和气泡图。 雷达图：通过极坐标的展现形式，使用围合的区域，来表示数据在不同维度的具体表现。 媒体 轮播：通过轮播的方式，来实现图片广告位的展示。 图片：用于直接展示需要呈现的图片数据。 视频播放器：用于播放FLV（Flash Video）格式的视频。
Palette 在代码编辑区域，在符号上单击鼠标右键，选择Command Palette或者按F1，进入命令面板，可以执行很多编辑功能。 图3 命令面板 Hover 把鼠标停留在符号上，可以查看符号的定义概要。再按住Ctrl键，单击符号，可以查看符号更加详细的定义。 例如，鼠标停留在“u
路由导航和路由视图 路由导航和路由视图组合使用，可实现路由导航以及展示当前生效路由对应的页面内容（如图1）。一个页面只支持放置一个路由导航和一个路由视图组件。 图1 页面预览效果 使用预置的路由导航和路由视图组件 在使用路由导航和路由视图组件时，当前使用该组件的页面和路由导航关联
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
