活动
最新
False
使用本地 CSS 文件自定义表单 - 其他最新消息
横幅背景图像
徽标
工作流活动
上次更新日期 2024年2月19日

使用本地 CSS 文件自定义表单

创建表单” 活动的“本地 CSS 文件路径” 字段旨在满足根据您的偏好自定义表单的必要性。

使用本地 CSS 文件时,应考虑以下事项:

  • 设置 CSS 文件路径后,系统会立即应用全局样式。
  • 必须将特定组件样式配置为类。 使用相关名称。 (例如 .username-label.submitButton-color)。
  • 将 CSS 文件路径设置为变量时,表单预览不显示样式更改。 要预览更改,请对 CSS 文件的路径使用硬编码值。

注意:UiPath.Form.Activities包的1.3.0 版开始提供“本地CSS 文件路径”属性。

教程

要设计具有特定外观要求的表单,请执行以下操作:
  1. 创建一个包含样式设置的 CSS 文件,并将其保存在本地设备上。 例如,要修改标签颜色并向表单添加自定义背景,我们创建了以下 CSS 文件:

    body {
        background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    .lastname-label
    {
       color : red;
       font-size : 15px;
       font-weight : 10px;
    }
    .firstname-label
    {
       color : green;
       font-size : 17px;
       font-weight : 30px;
    }
    .city-label
    {
       color : blue;
       font-size : 19px;
       font-weight : 50px;
    }
    .eligible-label
    {
       color : purple;
       font-size : 12px;
       font-weight : 30px;
    }body {
        background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    .lastname-label
    {
       color : red;
       font-size : 15px;
       font-weight : 10px;
    }
    .firstname-label
    {
       color : green;
       font-size : 17px;
       font-weight : 30px;
    }
    .city-label
    {
       color : blue;
       font-size : 19px;
       font-weight : 50px;
    }
    .eligible-label
    {
       color : purple;
       font-size : 12px;
       font-weight : 30px;
    }
  2. 在“ 创建表单” 活动 >“ 格式 ”属性 > “LocalCSSFilePath”中,输入 CSS 文件的路径(例如 "/file://C:\User heCssFile.css")。

    您也可以将本地 CSS 文件的路径存储为变量,并在“ LocalCSS 文件路径”字段中输入变量名称。



  3. 打开“表单设计器”,然后导航到自定义的目标组件。
  4. 在目标组件的“ 显示” 选项卡 > “自定义 CSS 类 ” 字段中,写入在文件中配置的自定义 CSS 类的名称。 这会将 CSS 文件中的数据绑定到表单。 例如,要自定义“城市” 下拉列表的标签,请输入相应的 CSS 类 city-label


  5. 保存组件。
  6. 对需要使用本地 CSS 文件自定义的每个组件重复步骤 3 到 5。
  7. 保存表单。

示例工作流

要查看完整的工作流或供日后参考,请下载XAML 示例

  • 教程
  • 示例工作流
支持和服务图标
获取您需要的帮助
UiPath Academy 图标
了解 RPA - 自动化课程
UiPath 论坛图标
UiPath Community 论坛
Uipath 白色徽标
信任与安全
© 2005-2024 UiPath. All rights reserved.