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

The LocalCSSFilePath field of the Create Form activity comes to greet the necessity of customizing the form to your preference.

使用本地 CSS 文件时，应考虑以下事项：

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

  “LocalCSS 文件路径” 属性从 UiPath.Form.Activities 包的 1.3.0 版本 开始提供。

教程

要设计具有特定外观要求的表单，请执行以下操作：

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;
   }
   

2. In the Create Form activity > Format property > LocalCSSFilePath, input the path to the CSS file (for example, "/file://C:\User heCssFile.css").

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

   

3. 打开“表单设计器”，然后导航到自定义的目标组件。

4. In the Display tab of the targeted component > Custom CSS Class field, write the name of the custom CSS class configured in the file. This binds the data in the CSS file to your form. For example, to customize the label for the City drop-down, input the corresponding CSS class city-label.

   

5. 保存组件。

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

7. 保存表单。

示例工作流

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