活动

开发者工具

“创建表单”活动中的“开发工具”属性允许用户调试其表单并试验 CSS 样式。启用后，Dev Tools 开发者工具将在运行时打开。

本教程介绍如何在开发工具中试验 CSS 样式。

重要提示：在开发工具中添加的自定义项是临时的。要将 CSS 样式永久应用于表单，您必须在 HTML 元素组件中创建一个自定义 CSS 类，并在其中输入在开发工具中试验的代码。

教程

要使用开发工具，请执行以下操作：

在“ 创建表单” 活动的“属性”面板中，选中：
1. 开发者工具
2. 禁用清理。此属性可提高表单的性能。
在 表单设计器中添加表单组件。在此示例中，拖放一个 HTML 元素 组件。您可以使用此组件自定义其他表单组件的外观
1. 在“HTML 元素”组件的“ 显示” 选项卡中，转到“ 内容 ” 部分。
2. 输入可更改其他组件外观的 CSS <style>类。写入 <style> 标签，然后输入类的名称。
  
  记住 CSS 类的名称，因为您将使用它来将 CSS 样式应用于其他表单组件。
3. 2.3. 向 CSS 类添加与您的用例匹配的属性在本例中，添加 background-color 属性并将其设置为 green。请参阅下面的 CSS 代码：
```
<style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
```
4. 2.4. 保存组件。
在 表单设计器中拖放一个文本字段组件。
1. 在“ 显示” 选项卡中，转到“ 自定义 CSS 类 ” 字段，然后输入在 HTML 元素中创建的 CSS 类的名称。在此示例中，键入 customclass。
2. 保存组件和表单。
运行该文件。 “开发工具” 窗口随即打开。
1. 单击以下图标然后在“ 表单渲染器 ” 中选择“ 文本字段 ” 组件。创建的 CSS 类将显示在开发者工具的“样式”选项卡中。在此示例中，将显示customclass 。
2. 转到在开发工具中创建的 CSS 类，并开始实时试验 CSS 样式。在本例中，在 customclass 中添加一个 border-style 属性，并将其设置为 solid。
3. 添加另一个 border-color 属性并将其设置为 deeppink。
试用 CSS 样式后，您可以将其永久应用于表单。转到 HTML 元素 组件的“内容” 部分，然后在 CSS 类中添加您试验过的属性。

对于此示例，请在 customclass中添加 border-style 和 border-color 属性：
```
<style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style><style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style>
```
保存组件和表单。