使用本地 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;
   }

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 示例