ASTRO轻应用 ASTROZERO-如何自定义主题样式:操作步骤

时间:2024-07-17 13:46:37

操作步骤

  1. 参考登录经典应用设计器中操作,进入经典版应用设计器。
  2. 在左侧菜单栏下方,单击“配置”

    图3 选择“主题配置”

  3. “主题配置”页签,配置“显示名称”,该名称将会显示在运营配置页签。
  4. 新建主题。

    新建主题有如下两种方式,请根据需要选择所需的方式。
    • 代码化方式
      1. 在主题管理中,单击“代码化新建”,弹出“创建主题”页面,如图4,界面中包含了所有组件的样式。
        图4 创建主题
      2. 修改相关的组件样式代码,关于组件的介绍请参考平台标准组件介绍

        例如,在输入框组件添加一个背景色,设置为红色,如图5

        图5 添加背景色
      3. 修改样式后,输入“主题名称”,单击页面右上方的“保存”进行编译保存,如图6
        图6 编译保存

        若编译不成功,您需要修改主题配置,单击禁用该主题,再单击编辑按钮。

      4. 关闭“创建主题”页面,返回“主题配置”页签。
      5. 在主题列表中,单击刚配置好主题后的打开开关“OFF”,打开后显示如图7所示,启用该主题。
        图7 开启主题
    • 界面化方式
      1. 在主题管理中,单击“界面化新建”。
      2. 配置相关组件或者颜色、排版主题样式。

        例如,修改按钮组件的样式,在左侧选择“按钮”组件,在中间区域直接修改界面参数设置样式。

        鼠标悬浮在界面参数上,会有参数说明。

      3. 在右侧设置“主题名称”,例如“按钮字体颜色为黄色”,单击页面右上方保存图标。

        设置后,在租户库中会出现创建的主题。

        图8 查看库
      4. 打开标准页面,在右侧“库”中单击“新增库”,查找并引入主题库,单击“确定”。
        图9 新增库
        图10 引入库

  5. 返回标准页面,单击“预览”按钮,在弹出的效果页面会看到自定义样式后的效果,如图11

    图11 代码化新建的效果界面

support.huaweicloud.com/usermanual-astrozero/astrozero_05_0057.html