正在生成
详细信息:
检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
效果:设置组件的透明度、轮廓样式及光标样式。 图8 设置显示效果 样式设置完成后,设计器会自动完成以下动作。 如果当前样式在选择器中没有选中任何一个类名或者ID,会自动生成随机类名。 将在样式面板设置完成的样式写入类名规则中。 图9 样式写入到类名样式 将样式选择器自动生成或者选中的类名绑定到当前组件属性中。
直接编写样式代码 样式面板提供的直接配置的样式满足了大部分的基础样式需求,但是,如果还是不能满足您的需求,AstroPro还提供了直接编写样式代码的方式来配置样式。 编写行内样式 等效于直接在html标签style属性里直接声明样式,权重高,用于覆盖样式。 参考登录AstroPr
样式设置 通过样式面板配置样式 直接编写样式代码 类名管理 使用状态选择器 行内绑定状态变量 父主题: 前端应用管理
画布中选中组件,在组件属性设置面板选择“样式”。 单击全局样式选择框类名旁的删除按钮。 删除后当前组件属性不再绑定该类名。 全局样式面板仍保留该类名及样式,其他组件仍可使用该类名。如需删除CSS中的该样式信息,可通过单击全局样式的,进入CSS面板进行删除。 父主题: 类名管理
修改类名 使用说明 已创建的类名支持修改。 类名修改,需注意以下事项: 当前组件绑定的类名会被修改。 全局样式中同类名会被修改成新类名。 其他组件绑定的同类名不会被修改。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
画布中选中组件,在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名或创建新类名,例如 .test,并设置全局样式,此时状态选择器默认为None。 在状态选择器下拉框中选择状态,例如hover,并设置全局样式。 从全局样式面板中可以看到,等效于直接编辑样式: .test:hover{
类名管理 新增类名 修改类名 删除类名 选择已有类名 父主题: 样式设置
使用说明 当选中一个组件,还没有自动生成类名时,您可以单击输入框手动输入类名,然后继续编辑样式面板的样式。 此时,组件会自动绑定您输入的类名,然后将在样式面板编辑的样式生成代码,写入到全局样式中。 操作步骤 参考登录AstroPro界面中操作,登录AstroPro界面。 在左侧导航栏中,选择“前端开发平台
画布中选中组件,在组件属性设置面板选择“样式”。 单击行内样式的编辑框后的。 在弹框中进行变量绑定。 图2 绑定变量 单击“确定”,变量绑定完成。 通过修改变量,查看组件样式展示效果。 图3 修改前样式 图4 修改变量 图5 修改后样式 父主题: 样式设置
单击待编辑应用模块内的“应用开发”,进入设计器。 画布中选中组件,在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名,例如 .test1、.test2、.test3等。 通过下拉框选择切换类名,组件将切换至类名绑定的对应样式。 父主题: 类名管理
</style> 修改应用开发工具控件定义文件,src\components\imgButton\index.js,将控件定义文件中的“componentA”修改为“imgButton”,“TestA”修改为“imgButton”,修改后效果如下图所示。 图5 修改定义文件 修改main.
画布选中组件,修改组件的属性、样式、绑定事件等。 右侧属性设置面板 右侧设置面板分为属性设置、样式设置和高级设置面板。 属性设置,设置组件的属性,比如按钮组件的大小、文案、按钮类型等组件提供配置的属性。 图3 基本属性设置 样式设置,设置组件的样式,提供直接配置样式,也可以编写CSS代码配置样式。
通用参数: id:规定HTML元素的唯一的id。 className:用于属性定义元素的类名;通常用于指向样式表的类和JavaScript中。 ref:接受一个内部值,返回一个响应式的、可更改的ref对象,此对象只有一个指向其内部值的属性。 更多参数说明详情请参考vuejs。 父主题: 前端应用管理
Lombok插件:是否为DO、DTO或QO定义类自动生成Lombok注解。 工程目录:设置生成代码的工程目录样式。 单Module:工程目录结构只有一个模块。 base/service:工程目录结构包含base和service两个模块。 DDD:和单Module一样,工程目录结构只有一个模块。 图3 工程目录不同类型设置效果
生成策略 业务设计 对象及关系介绍 前端应用管理 创建前端应用 新建页面 使用组件设计页面 生成前台业务代码 新建页面 样式管理 通过样式面板配置样式 直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理
将一个Img组件拖拽至左侧容器内,在右侧属性设置面板选择“样式”,设置尺寸宽高为100%,在右侧属性设置面板选择“属性”,src设置为前提条件中获取的路径。 图5 设置图片样式 图6 图片设置路径 将一个Box组件拖拽至右侧容器内,在右侧属性设置面板选择“样式”,设置组件样式,例如,宽高为250px,250px。
略 > 代码风格 > 工程目录”中可进行定义,生成效果差异如图5所示。本示例采用默认配置即“base/service”样式,关于“单Module”和“DDD”样式的代码目录结构说明,请参见服务开发框架详解。 图4 设置代码风格 图5 工程目录不同类型设置效果 父主题: 创建企业核心应用
前端应用管理 初识应用设计器 设计前端应用流程 前端开发视频指导 前端应用管理 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
户不可以修改。但是可以使用AstroPro预置的devspore-codegen-maven-plugin插件,通过修改本地metadata.json元数据,来重新生成base层。使用该插件重新生成base层时,service层不会重新生成。不建议采用上述方式在本地修改metadata
前端应用由一个或多个组件拼装而成。在左侧插件栏打开物料资产包,选择合适的组件,拖拽到中间画布中。在画布选中组件,设置组件的属性、样式、以及绑定事件。 图5 添加组件 图6 设置组件基本属性 图7 设置组件样式 图8 设置组件高级属性 步骤五:生成代码 根据配置的页面设计,生成应用的基本代码。代码生成后,会下载至本地,供您使用。