标签(AntdTag)组件
本文将介绍标签(AntdTag)组件的使用,标签组件功能分【内容】及【样式】两块选项,用户根据自己的需求进行内容的编辑及样式的修改
一、内容
1、属性
1.1 标签项数据源
可以设置标签组件的显示内容,是静态的,还是通过查询绑定动态显示
1.1.1 静态
可以点击右下角的新建标签项
- 如需对标签的点击效果(例如:配置onClick事件)及文本修改,可以点击旁边的设置按钮


- 如需删除当前菜单,可点击旁边的删除按钮

1.1.2 动态
可以在动态数据源中通过{{ }}的方式进行数据传递(数据格式要求为数组),例如:
[
"abc",
"bcd",
"123"
]

在配置标签项时,可以通过{{currentItem}}获取动态标签项数据源内容

2、属性
2.1 标签
可以配置类别滑动条组件的文本标题,如果不需要显示文本,选项为空即可,可以看下面的示例子:

2.2 位置
可以设置类别滑动条组件标题的位置,有3类选项可选择:自动、左、上
名称 | 描述 |
---|---|
自动 | 标签与组件自动对齐 |
左 | 文本标题摆在组件的左侧 |
上 | 文本标题摆在组件的顶部 |

3、校验
3.1 必填
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置该组件是否为必填项

4、属性
4.1 提示
该功能需要有标签的情况下才可使用
开启该功能后,在文本标题右侧会有一个❓号的提示标识,供用户查看提示消息

4.2 显示冒号
该功能需要有标签的情况下才可使用
开启该功能后,在文本标题右侧会有一个:号的标识

4.3 是否显示
4.3 禁用
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置标签组件在页面上是否可用

4.4 行排列
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置标签组件的排列方式,开启该功能后,会以横排的方式显示;

4.5 加载时显示动画
点击旁边的JS图标可以自行编写代码,通过True/False来控制是否开启该功能
可以设置标签组件在数据加载渲染的时候是否显示动画效果

4.6 高度
该功能可以配置下拉单选组件的高度大小
名称 | 描述 |
---|---|
固定高度 | 通过拖拽边框来控制组件的大小,使其固定不变 |
自动高度 | 组件根据画布内容及其他情况可以自行动态调整 |
区间自动高度 | 与自动高度差不多,支持设置组件占用的最小、最大行数 |

二、组件属性
2.1 isVisible
该属性可以反应组件的可见状态,是True还是False,可以看下面的示例:
{{AntdTag1.isVisible}}

2.2 isDisbled
该属性可以反应组件的可用状态,是True还是False,可以看下面的示例:
{{AntdTag1.isDisabled}}

2.3 sourceData
该属性可以获取动态的数据源内容,可以看下面的示例:
{{AntdTag1.sourceData}}

2.4 tagItems
该属性可以获取静态的数据源内容,可以看下面的示例:
{{AntdTag1.tagItems}}

三、组件属性设置方法
3.1 setDisabled
该方法可以设置isDisabled属性的值,可以看下面的示例:
{{AntdTag1.setDisabled()}}

3.2 setVisibility
该方法可以设置isVisible属性的值,可以看下面的示例:
{{AntdTag1.setVisibility(false)}}

3.3 setSourceData
该方法可以设置SourceData属性的值,可以看下面的示例:
{{AntdTag1.setSourceData(["123"])}}
