检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
配置样式设置 通过样式面板配置样式 直接编写样式代码 类名管理 使用状态选择器 行内绑定状态变量 父主题： 前端应用管理
配置属性设置 使用说明 添加组件后您可以通过右侧的属性设置面板，对当前选中组件进行属性设置。 参数说明 通用参数： id：规定HTML元素的唯一的id。 className：用于属性定义元素的类名；通常用于指向样式表的类和JavaScript中。 ref：接受一个内部值，返回一个
配置高级设置 条件渲染 循环渲染 绑定事件 父主题： 前端应用管理
界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 单击全局样式选择框的类名或者单击类名旁边的修改按钮，重新输入类名，例如.test123。 单击回车键，类名修改完成。 父主题：
FullAccess Astro Pro InstanceManagement 查询商品可售卖周期 √ √ 查询订单信息 √ √ 订购询价 √ √ 查询实例信息 √ √ 变更询价 √ √ 云服务到期查询 √ √ 购买实例 √ √ 购买扩容包 √ √ 实例升级 √ √ 实例冻结 √ √
直接编写样式代码 样式面板提供了可直接配置的样式，满足了大部分的基础样式需求。如果这些样式还是不能满足您的需求，AstroPro还提供了直接编写样式代码的方式来配置样式。 编写行内样式 等效于直接在html标签style属性里直接声明样式，权重高，用于覆盖样式。 参考登录Astr
类名管理 新增类名 修改类名 删除类名 选择已有类名 父主题： 配置样式设置
可见性。 图4 设置定位 文本：设置文本的字号、字体、行高、字重、颜色、对齐方式、风格及修饰。 图5 设置文本 背景：设置组件背景，背景图、渐变类型、颜色及裁剪方式。 图6 设置背景 边框：设置边框的位置、颜色、位置宽度以及是否为圆角。 图7 设置边框 效果：设置组件的透明度、轮廓样式及光标样式。
界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名，例如 .test1、.test2、.test3等。 通过下拉框选择切换类名，组件将切换至类名绑定的对应样式。
单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 在全局样式选择框中选择已有的类名或创建新类名，例如 .test，并设置全局样式，此时状态选择器默认为None。 在状态选择器下拉框中选择状态，例如hover，并设置全局样式。 从全局样式面板中可以看到，等效于直接编辑样式：
界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 单击全局样式的输入框，输入类名，例如.test。 类名不能以数字开头。 绑定组件属性元素ID：使用格式 #elementID。
画布中选中组件，在组件属性设置面板选择“样式”。 单击行内样式的编辑框后的。 在弹框中进行变量绑定。 图2 绑定变量 单击“确定”，变量绑定完成。 通过修改变量，查看组件样式展示效果。 图3 修改前样式 图4 修改变量 图5 修改后样式 父主题： 配置样式设置
使用说明 AstroPro为每个项目预置了项目管理员、架构师和开发者三种类型的角色。 项目管理员 可以增删改査项目下的所有资源。 可以为项目下的所有角色分配用户（仅限于同账号下的用户，如图1中的IAM用户1、IAM用户2）。 图1 华为账号与IAM用户 架构师 可以新建服务。 可
前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击需要绑定的事件。 在弹框中设置绑定事件。 可以选择已有方法或者添加新方法，如果选项添加新方法，单击“确定”之后将在JS面板中创建一个该名称的新方法。
界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待操作应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。 单击全局样式选择框类名旁的删除按钮。 删除后当前组件属性不再绑定该类名。 父主题： 类名管理
查看大纲树 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开并查看页面大纲树。 图1 设置主页 父主题： 前端应用管理
查看服务依赖 使用说明 服务依赖创建后，只能查看不支持再次编辑。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“后端开发平台 > 服务管理 > 服务依赖”。 在项目下拉框中，选择服务所属的项目。 在依赖服务列表中，单击服务后的“查看”，即可查看服务间的依赖。
isLogin，具体操作可参考添加页面变量。 图1 添加变量 选中组件，在组件属性设置面板选择“高级”。 单击“是否渲染”后的，进行变量绑定。 图2 绑定变量 选项绑定的变量，单击“确定”。 绑定成功后可根据变量state.isLogin的值，查看渲染效果。 图3 state.isLogin为false时
入门准备工作 注册华为账号并实名认证 如果您已有一个华为账号，请跳到下一个任务。如果您还没有华为账号，请参考以下步骤创建。 进入华为云官网，单击页面右上角的“注册”。 参考注册华为账号并开通华为云中操作，完成注册。 注册后参考个人账号如何完成实名认证或企业账号如何完成实名认证中操作，完成个人或企业账号实名认证。
图1 添加变量 选中组件，在组件属性设置面板选择“高级”。 单击“循环数据”后的，进行变量绑定。 选择绑定的变量，单击“确定”。 图2 绑定变量 为展示内容添加变量，默认为item。 绑定成功后，查看渲染效果。 图3 添加变量 图4 查看渲染效果 相关概念关联： 循环数据，即需要循环渲染的数组，在这里是state
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
