检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
属性设置 使用说明 添加组件后您可以通过右侧的属性设置面板,对当前选中组件进行属性设置。 参数说明 通用参数: id:规定HTML元素的唯一的id。 className:用于属性定义元素的类名;通常用于指向样式表的类和JavaScript中。 ref:接受一个内部值,返回一个响应
高级设置 条件渲染 循环渲染 绑定事件 父主题: 前端应用管理
样式设置 通过样式面板配置样式 直接编写样式代码 类名管理 使用状态选择器 行内绑定状态变量 父主题: 前端应用管理
选择。 图1 设置布局 间距:默认间距为0,可单击待设置的间距数值进行自定义修改。 图2 设置间距 尺寸:设置组件的宽高,溢出处理策略及适应方式。 图3 设置尺寸 定位:设置组件位置和大小如何计算方式。 默认定位:没有特别的定位,组件的位置会按照正常的文档流进行布局。 相对定位:
显示或隐藏页面中的内容,例如:如果您希望当用户已经登录的时候,显示“欢迎登录”的文字,未登录的时候,显示“请登录”的文字。 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”,进入设计器。
在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”,进入设计器。 选中组件,在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上,将显示事件列表。 在事件列表中,单击需要绑定的事件。 在弹框中设置绑定事件。 方法名称:输入方法名称,名称可以由字母、数字、下划线、$
循环渲染 页面可能有若干份重复的、动态生成的内容,例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
新增类名 使用说明 当选中一个组件,还没有自动生成类名时,您可以单击输入框手动输入类名,然后继续编辑样式面板的样式。 此时,组件会自动绑定您输入的类名,然后将在样式面板编辑的样式生成代码,写入到全局样式中。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。
单击待编辑应用模块内的“开发应用”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名或创建新类名,例如 .test,并设置全局样式,此时状态选择器默认为None。 在状态选择器下拉框中选择状态,例如hover,并设置全局样式。 从全局
单击待编辑应用模块内的“开发应用”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 单击全局样式的。 在弹框中直接编写全局样式。 可以直接声明多条CSS样式或其他媒体查询的样式。 图3 编写全局样式 单击“保存”,完成全局样式编辑。 通过类名绑定已创建的全局样式。 图4
类名管理 新增类名 修改类名 删除类名 选择已有类名 父主题: 样式设置
单击待操作应用模块内的“开发应用”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 单击全局样式选择框类名旁的删除按钮。 删除后当前组件属性不再绑定该类名。 全局样式面板仍保留该类名及样式,其他组件仍可使用该类名。如需删除CSS中的该样式信息,可通过单击全局样式的,进入CSS面板进行删除。
在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 单击全局样式选择框的类名或者单击类名旁边的修改按钮,重新输入类名,例如.test123。 单击回车键,类名修改完成。 父主题: 类名管理
除了自动生成和手动新增类名之外,您也可以通过输入框的下拉框来选择已有的类名。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名,例如
态计算组件的位置。这些计算结果随后可以直接应用到组件的行内样式style属性中,从而实现动态样式的调整和布局的优化。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”,进入设计器。
项目名称:新增项目的名称,只能包含大小写字母、数字、连字符(-)和下划线(_)。 描述:设置项目的描述信息,通常设置为项目的用途或者功能。 版权信息:自定义代码的版权信息,请以“//”开头或者以“/*”开头并以“*/”结尾。 Package:设置生成代码的顶层包名,由一个或多个小写字母和数字组成,片段之间用点号(
服务中的一个实体,对应数据库中的一张表。 属性说明 在业务设计页面,从“business”中,拖拽“BO”对象至画布空白区域。选中对象,在右侧页面设置对象属性,如图1所示。 图1 BO 对象名称:设置对象的名称,必须使用大驼峰格式,不允许存在连续的大写字母。 中文名:设置BO对象的中文名称。
您可以在插件栏的物料面板中,将组件拖拽至中心画布内进行页面设计。您还可以单击选中画布中的组件,右键直接在画布中插入组件,添加父级,删除组件,复制组件及绑定事件。 右侧属性设置面板 右侧设置面板分为属性设置、样式设置和高级设置面板。 属性设置,设置组件的属性,比如按钮组件的ID、className、按钮文本。
当您没有自定义API路径,且“实例级别”选择“实例”时,生成的API路径上会拼接一个{MetaBo}_id的路径,同时方法上会多生成一个当前MetaBo主键的参数,如图2所示。 图2 API路径 描述:输入自定义API的描述信息。 设置代码生成层,参数设置与代码生成关系请参考表1。 表1 设置代码生成层组合说明 接口层
从“business”中,拖拽“BO”对象至画布空白区域。 选中BO对象,在对象属性中,单击“编辑字段”。 单击“新增”,添加一个phone字段,并将脱敏规则设置为2中定义的内容。 设置后,返回的值将进行脱敏处理,如1****123456。 图3 引用脱敏规则 父主题: AstroPro学堂