检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
通过在线编辑器完善组件。 测试结果基本满足预期，但是由于图片尺寸不同，有些图片未能完全展示，还需优化。本例中向您介绍AstroZero平台提供的，在线组件开发工具。 单击组件详情页中的“编辑”，在跳转到的“组件编辑”页面进行组件代码开发，完成后单击“发布”，即可完成组件更新。
本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。参考消费者业务网站（如图1所示），页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
图2 修改界面参数设置样式 在右侧设置“主题名称”，例如“按钮字体颜色为黄色”，单击页面右上方保存图标。 图3 设置主题名称 设置后，在租户库中会出现创建的主题“按钮字体颜色为黄色”。
字体颜色：设置标题的字体和颜色。 行数：标题占页面的行数。 属性：设置字段的属性，勾选“隐藏”后，页面上会隐藏该字段。 父主题： 零码组件介绍
例如，某用户详情页URL为“https://AstroZero域名/studio/index.html#/admin/user/10gd000000bcXXXXXXXX/detail”，加粗字体即用户ID。
若为公共接口，支持查看接口参数并进行在线测试。若为私有接口，只可查看接口的入参和出参。 图2 公共接口 图3 私有接口 单击接口URL后的，可查看接口的参数。 若为公共接口，单击“测试一下”，填写输入参数，单击“执行”，可运行该接口。返回成功响应，表示接口调用成功。
若为公共接口，支持查看接口参数并进行在线测试。若为私有接口，只可查看接口的入参和出参。 单击接口URL后的，可查看接口的参数。 若为公共接口，单击“测试一下”，填写输入参数，单击“执行”，可运行该接口。返回成功响应，表示接口调用成功。
布局：选择“布局”中的样式，在右侧区域设置布局参数，如菜单、子菜单、页签、应用标题的字体及颜色等。 布局选项：提供了一些常见选项，用于设置应用布局。 启用页签栏：是否启用页签栏。 切换菜单时记录浏览器历史：切换菜单时，是否记录在浏览器历史中。
标题颜色：显示名称的字体颜色。 背景颜色：设置组件的背景颜色。 显示分割线：是否显示分割线。 属性：设置字段的属性，例如勾选“隐藏”后，页面上会隐藏该字段。 父主题： 零码组件介绍
打开“彩色”开关，选项值字体会不同颜色展示。 直接单击选项名，可设置具体选项值。 单击，可设置该选项值是否为默认值。 单击，调整选项顺序。 单击，可删除选项。 单击“新增选项”，可增加选项值。 单击“批量添加”，可批量添加选项值。
文本样式设置/文本字体大小：图例文本字体的大小。 文本样式设置/文本颜色：图例文本的颜色。 文本样式设置/字体系列：图例文本的字体。 文本样式设置/字体粗细：图例文本字体的粗细。 文本样式设置/文字风格：图例文本的文字风格。 组件标题：设置组件的标题。
打开“彩色”开关，选项值字体会不同颜色展示。 直接单击选项名，可设置具体选项值。 单击，可设置该选项值是否为默认值。 单击，调整选项顺序。 单击，可删除选项。 单击“新增选项”，可增加选项值。 单击“批量添加”，可批量添加选项值。
文本样式设置/字体大小：图例文本字体的大小。 文本样式设置/文本颜色：图例文本的颜色。 文本样式设置/字体系列：图例文本的字体。 文本样式设置/字体粗细：图例文本字体的粗细。 文本样式设置/文字风格：图例文本的文字风格。 组件标题：设置组件的标题。 设置标题：是否显示标题。
输入文本后选中文本，可设置文本字体、大小、颜色、对齐方式等。 图5 选择“高级设置” 图6 文本设置 选中文本组件，单击，可对文本组件做更多操作。 例如，设置边框、背景等，勾选“展示溢出文本”。调整组件宽度和高度，使得页面美观。
文本样式设置/字体大小：图例文本字体的大小。 文本样式设置/文本颜色：图例文本的颜色。 文本样式设置/字体系列：图例文本的字体。 文本样式设置/字体粗细：图例文本字体的粗细。 文本样式设置/文字风格：图例文本的文字风格。 组件标题：设置组件的标题。 设置标题：是否显示标题。
标签/标签文字样式/字体大小：标签的字体大小。 标签/标签文字样式/字体粗细：标签的字体粗细。 标签/标签文字样式/字体系列：标签的字体系列。 轮廓样式/是否展现：是否展现外部轮廓样式。 轮廓样式/颜色：外部轮廓的颜色，支持单色和渐变色设置。 图表标题：设置组件的标题。
文本样式设置/文本字体大小：图例文本字体的大小。 文本样式设置/文本颜色：图例文本的颜色。 文本样式设置/字体系列：图例文本的字体。 文本样式设置/字体粗细：图例文本字体的粗细。 文本样式设置/文字风格：图例文本的文字风格。 组件标题：设置组件的标题。
字体大小：设置指标内容的字体大小。 字体粗细：设置指标内容的字体粗细。 字体系列：设置指标内容的字体系列。 自动求和：指标是否自动求和。 数值内容：开启自动求和后，数值内容不支持修改。 文本颜色：设置指标数值的文本颜色。 字体大小：设置指标数值的字体大小。
标题内容 > 字体大小：设置指标内容的字体大小。 标题内容 > 字体粗细：设置指标内容的字体粗细，如正常、加粗等。 标题内容 > 字体系列：设置指标内容的字体。 标题内容 > 自动求和：指标是否自动求和。
字体颜色 水印字体的颜色。 字体大小 水印字体的大小。 旋转角度 水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度 水印的透明度设置。 父主题： 高级页面
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
