简介
一个FormElement就是一个复合控件对象,如下图:
它包含了如下的三个组成部分:
- 文本标签(文本标签文本信息和必填提示图标)
- 编辑框(可选择不同类型的编辑框,如TextEditor, TextArea, CheckBox等等)
- 提示信息(包含提示图标和提示信息)
另外FormElement也支持DataSet绑定,通过DataSet,DataPath和Property属性的设定,可以将FormElement与一个Entity对象绑定,从而使:
- 文本标签:获取对应的DataType中的PropertyDef中的label信息作为自身的Label,并获取PropertyDef的required信息作为自身的required信息,从而决定是否要显示必填提示图标
- 编辑框:将编辑框绑定到这个Entity的某一个属性上,并根据PropertyDef的特性调整自身的特性,如:displayFormat, dataType等等
- 提示信息:加载PropertyDef中定义的校验器,并在编辑的过程中,根据数据校验的结果决定提示信息的提示图标和详细提示信息的内容
其他详细属性说明
editable
editorType
通过该属性可以设定FormElement中包含的编辑框的类型,可选的有:
除了editorType可以设定编辑框类型之外,还可以通过FormElement的子节点定义:
在Editor节点下添加自己所需要的控件。下面这种方式的好处是可以通过进一步设定TextEditor控件的详细属性,从而做更多的定制。
editorWidth
默认编辑框的宽度
formProfile
绑定的表单配置。详情请参考:FormProfile(DCUG)
hintPosition
与labelPosition类似,hintPosition也支持两种类型设定:right和bottom
hintPosition为right的效果:
hintPosition为bottom的效果:
hintSpacing
提示信息区与编辑框之间的空隙的宽度。
hintSpacing为3的效果:
hintSpacing为30的效果(注意提示信息区与编辑框之间的空隙的宽度。)
hintWidth
提示信息区的宽度。如果提示信息较长,可以通过这个属性调整宽度。
label
设置FormElement中的文本标签的内容
labelAlign
设置FormElement中的文本标签的靠齐方式,默认为left,可调整为center或right效果。
labelAlign为left的效果:
labelAlign为center的效果:
labelAlign为right的效果:
labelPosition
文本标签的显示位置。可选值有:left或top.
labelPosition为left的效果:
labelPosition为top的效果:
labelSeparator
文本标签与编辑器之间的分隔字符。默认为":",如下是将labelSeparator调整为"="的效果:
labelSpacing
文本标签与编辑框之间空隙的宽度。
下图是labelSpacing为10的效果:
下图是labelSpacing为100的效果:
labelWidth
FormElement文本标签的宽度
readOnly
控制文本编辑框的只读属性
showHint
是否显示提示信息区。
showHintMessage
是否将提示信息的文本消息直接显示在界面中。
下面是将产品名称的showHintMessage设置为false的效果(只有将鼠标移动到对应编辑框上方的时候才能看到提示信息):
下面是将产品名称的showHintMessage设置为true的效果(提示信息的文本消息直接显示在界面中):
showLabel
是否显示FormElement的标题,下图是将产品名称对应的ForemElement的showLabel设置为false之后的效果图:
trigger
该属性用于设置FormElement对于编辑框的默认trigger按钮
默认的ClassName
d-form-element
Attachments:
FormElementEditorType.png (image/png)
FormElementEditorNode.png (image/png)
FormElementLabelSeparator.PNG (image/png)
FormElementLabelSpacing10.PNG (image/png)
FormElementLabelSpacing100.PNG (image/png)
FormElementShowLabel.png (image/png)
FormElementShowHingMessageFalse.png (image/png)
FormElementShowHingMessageTrue.png (image/png)
FormElementLabelLeft.PNG (image/png)
FormElementLabelCenter.PNG (image/png)
FormElementLabelRight.PNG (image/png)
FormElementLabelTop.PNG (image/png)
FormElementHintBottom.PNG (image/png)
FormElementHintSpacing30.PNG (image/png)