自适应表单组件的内联样式

您可以通过使用主题编辑器指定样式来定义自适应表单的整体外观和样式。 此外,您还可以将内联CSS样式应用于单个自适应表单组件,并即时预览更改。 内联样式会覆盖主题中提供的样式。

应用内联CSS属性

要向组件添加内联样式,请执行以下操作:

  1. 在表单编辑器中打开表单,然后将模式更改为样式模式。 要将模式更改为样式模式,请在页面工具栏中,点按Canvas-drowlap > Style

  2. 在页面中选择一个组件,然后点按编辑按钮edit-button。 在侧栏中打开样式属性。

    您还可以从侧栏的表单层次结构树中选择组件。 表单层次结构树在侧栏中可用作表单对象。

    在Style模式下,您可以看到在表单对象下列出的组件。 但是,侧栏中的“表单对象”列表会列出字段和面板等组件。 字段和面板是可包含文本框和单选按钮等组件的通用组件。

    从侧栏中选择组件时,您会看到列出的所有子组件以及选定组件的属性。 您可以选择特定子组件并设置其样式。

  3. 单击侧栏中的选项卡以指定CSS属性。 您可以指定以下属性:

    • Dimensions & Position (显示设置、内边距、高度、宽度、边距、位置、z指数、浮动、清除、溢出)
    • Text (字体系列、粗细、颜色、大小、行高和对齐方式)
    • Background (图像和渐变、背景颜色)
    • Border (宽度、样式、颜色、半径)
    • Effects (阴影、不透明度)
    • Advanced (允许您为组件编写自定义CSS)
  4. 同样,您也可以为组件的其他部分(如Widget、Caption和Help)应用样式。

  5. 点按​Done​以确认更改,或点按​Cancel​以放弃更改。

示例:字段组件的内联样式

以下图像描述了将内联样式应用于文本字段前后的文本字段。

应用内联样式之前的文本框组件

应用内联样式属性之前的文本框组件

请注意,在应用以下CSS属性后,文本框样式发生了更改,如下图所示。

选择器

CSS属性

效果

字段

边框

边框宽度= 2像素

边框样式=实线

边框颜色=#1111

在字段周围创建一个黑色的2像素宽边框

文本框

background-color

#6495ED

将背景颜色更改为玉米花蓝色(#6495ED)

注意:您可以在值字段中指定颜色名称或其十六进制代码。

标签

Dimension和位置>宽度

100px

将标签的宽度修复为100像素

字段帮助图标 文本>字体颜色 #2ECC40 更改帮助图标面的颜色。

长描述

text-align

居中

将帮助的长说明与中心对齐

应用内联样式后的文本框样式

应用内联样式属性后的文本框组件

按照上述步骤,您可以选择其他组件(如面板、提交按钮和单选按钮)并设置其样式。

注意

样式属性因您选择的组件而异。

复制并粘贴样式

您还可以在自适应表单中将样式从一个组件复制并粘贴到另一个组件。 在​Style​模式中,点按组件,然后点按复制图标复制

点按同一类型的其他组件,然后点按粘贴图标复制以粘贴复制的样式。 您还可以点按“清除样式”图标Copy以清除应用的样式。

为组件的不同状态设置样式

您可以为组件类型的不同状态设置样式。 不同状态包括:Focus、Disabled、Hover、Error、Success和Mandatory。

要为组件状态定义样式,请执行以下操作:

  1. 在​Style​模式中,点按组件,然后点按编辑图标编辑

  2. 使用​State​下拉列表选择组件的状态。

    选择状态

  3. 定义组件选定状态的样式,然后点按保存以保存属性。

您还可以模拟成功和错误状态。 点按展开图标以查看​Simulate Success​和​Simulate Error​选项。

模拟状态

在此页面上