更新时间:2022-04-26 GMT+08:00
分享

如何自定义主题样式

AppCube预置了很多默认样式,您可以对标准页面的主题样式进行自定义修改。

场景描述

自定义主题时,您可以自定义修改标准页面的样式。设置完并启用主题后,该App中标准页面相同组件的展示将以主题中配置为准。

例如,在标准页面中添加一个“表单”组件,并绑定数据对象为“Alarm”,选择前三个字段,添加“保存”和“重置”按钮,单击“完成”。然后先单击“保存”按钮,再单击“预览”按钮,效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色,启用主题使得标准页面表单中输入框的背景色为红色,效果如图2启用后效果图所示。

图1 启用前效果图
图2 启用后效果图

您需要熟悉CSS的Less代码编写规范,关于Less的内容请参考Less介绍

操作步骤

  1. 在应用开发页面左侧菜单栏下方选择“配置”,在打开的页签选择“主题配置”

    图3 选择“主题配置”

  2. 配置“显示名称”,该名称将会显示在运营配置页签。
  3. 有两种方式新建主题。

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

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

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

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

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

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

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

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

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

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

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

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

分享:

    相关文档

    相关产品

close