正在生成
详细信息:
检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
onClickNew(eventArgs, extParam1, extParam2, ...)。 图1 设置绑定事件 单击“确定”,弹出JS面板,刚创建的onClickNew事件已存在JS面板中。 在JS面板中编写绑定方法的具体逻辑。 图2 实现逻辑编写 单击“保存”,绑定事件完成。 创建普通方法在生命周期中使用
通过样式面板配置样式 使用说明 添加组件后您可以通过右侧的属性设置面板,对当前选中组件进行样式的设置。 通过样式面板配置样式 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“应用开发”,进入设计器。
画布中选中组件,在组件属性设置面板选择“样式”。 单击全局样式选择框类名旁的删除按钮。 删除后当前组件属性不再绑定该类名。 全局样式面板仍保留该类名及样式,其他组件仍可使用该类名。如需删除CSS中的该样式信息,可通过单击全局样式的,进入CSS面板进行删除。 父主题: 类名管理
时编辑样式面板,就是相当于在编辑该类名对应状态的样式。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“应用开发”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。
== null } 图1 添加function工具类 单击“保存”,完成function工具类添加。 在JS面板的函数中使用function utils 您可以在JS面板或者页面生命周期函数中通过this.utils.isNil方式使用自定义的函数。 代码示例: function
新增类名 使用说明 当选中一个组件,还没有自动生成类名时,您可以单击输入框手动输入类名,然后继续编辑样式面板的样式。 此时,组件会自动绑定您输入的类名,然后将在样式面板编辑的样式生成代码,写入到全局样式中。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。
在JS面板中创建一个该名称的新方法。 扩展参数:调用当前事件传入的真实参数,数组格式,追加在原有事件参数之后如: onClickNew(eventArgs, extParam1, extParam2, ...)。 图1 设置绑定事件 单击“确定”,弹出JS面板。 在JS面板中进行绑定方法的具体逻辑实现。
直接编写样式代码 样式面板提供的直接配置的样式满足了大部分的基础样式需求,但是,如果还是不能满足您的需求,AstroPro还提供了直接编写样式代码的方式来配置样式。 编写行内样式 等效于直接在html标签style属性里直接声明样式,权重高,用于覆盖样式。 参考登录AstroPr
中心画布位于设计器中央,是可视化设计的核心模块,可以在插件栏的物料面板中,将组件拖拽至中心画布内,然后单击画布选中组件,修改组件的属性、样式、绑定事件等。 右侧属性设置面板 右侧设置面板分为属性设置、样式设置和高级设置面板。 属性设置,设置组件的属性,比如按钮组件的大小、文案、按钮类型等组件提供配置的属性。
添加组件后您可以通过右侧的属性设置面板,对当前选中组件进行属性的设置。 参数说明 通用参数: id:规定HTML元素的唯一的id。 className:用于属性定义元素的类名;通常用于指向样式表的类和JavaScript中。 ref:接受一个内部值,返回一个响应式的、可更改的ref对象,此对象只有一个指向其内部值的属性。
用数据源之前需要先在画布中拖放入Collection组件,然后在属性面板中选择需要绑定的数据源。 在左侧插件栏中,单击,展开物料资产包。 在Collection组件,并拖拽至中心画布中。 选中组件,在属性设置面板中选择“属性”。 dataSource下拉框中选择待绑定的数据源。 图3
修改类名 使用说明 已创建的类名支持修改。 类名修改,需注意以下事项: 当前组件绑定的类名会被修改。 全局样式中同类名会被修改成新类名。 其他组件绑定的同类名不会被修改。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
Text组件1:在右侧属性设置面板选择“样式”,字体大小调整至11px,在右侧属性设置面板选择“属性”,文本输入“使用Astro,轻巧便捷的与您的业务一起发展、壮大”。 输入框组件1:在右侧属性设置面板选择“样式”,设置尺寸宽为100%,高度为30px;在右侧属性设置面板选择“属性”,文本输入“请输入邮箱或手机号”。
循环渲染 页面可能有若干份重复的、动态生成的内容,例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
使用组件设计页面 生成前台业务代码 新建页面 样式管理 通过样式面板配置样式 直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理 使用JS面板 添加变量 物料中心 自定义组件开发指南 上传自定义组件物料包
在中心画布中选中按钮组件。 在右侧属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上,将显示事件列表。 在事件列表中,单击OnClick事件。 在弹框中输入方法名称,例如handleOnClick。 图1 事件绑定 单击“确定”,弹出JS面板。 在JS面板中编写代码。 代码示例: function
添加变量 画布中选中组件,在组件属性设置面板选择“样式”。 单击行内样式的编辑框后的。 在弹框中进行变量绑定。 图2 绑定变量 单击“确定”,变量绑定完成。 通过修改变量,查看组件样式展示效果。 图3 修改前样式 图4 修改变量 图5 修改后样式 父主题: 样式设置
样式设置 通过样式面板配置样式 直接编写样式代码 类名管理 使用状态选择器 行内绑定状态变量 父主题: 前端应用管理
前端开发视频指导 前端应用管理 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
在左侧导航栏中,选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“应用开发”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名,例如 .test1、.test2、.test3等。 通过下拉框选择切换类名,组件将切换至类名绑定的对应样式。