多选选项卡
文档基于多选选项卡v1.1.1版本
组件说明
多选选项卡组件可以通过全局样式、样式、系列等配置项修改组件样式；常用于多组件、多页面之间的效果切换，用于交互效果的实现，在选项卡的基础上增加了多选的功能。
效果案例
如下案例所示使用多选选项卡可以同时选择0个或者多个选项对点标记进行操作。
*多选选项卡 效果案例
一、样式
在样式中可以设置组件的基本属性、全局、样式和系列。
1、基本属性
位置尺寸
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
组件尺寸不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏
勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。
2、全局
在全局中可以配置多选选项卡默认选中、网格布局、对齐方式。
配置项 | 说明 |
默认选中 | 多选选项卡可以同时选择多个选项，选项卡中的选项从1开始，以英文逗号分隔默认选中的选项，如(1,2) |
网格布局 | 选项卡中选项的排列方向，行数和列数等 |
对齐方式 | 选项卡中选项的对齐方式，分为靠左、居中、靠右三种方式 |
如下图所示，设置为默认选中"1,2"居中对齐方式，1行4列布局：
*全局配置项说明
3、样式
样式分为默认/选中两个不同情况，配置项相同，当前以默认情况为例。
文字
文本样式：
当有特定字体需求时，对坐标轴显示字体进行调整，可以对字体、字体大小、字体颜色、加粗、斜体、字距、行距进行设置。当需要调整时，可以根据效果逐步修改。
偏移：
偏移用来调整选项文字的偏移量，以px为单位在“选项框内”进行偏移。
阴影：
选项卡按钮未选中时的文字阴影，如下示例图所示将阴影调整为了蓝色，可以通过x/y模糊配置进行进一步调整。
*阴影配置项说明
背景
背景可以设置为颜色或者自定义图片两种背景方式。
描边
描边设置的是选项卡内选项的描边程度。
4、系列
在数据系列中，可以针对某个选项卡进行个性化的设定，通过系列的类别字段进行指定。
*系列配置项说明
配置项 | 说明 |
s | 选项字段值 |
整体偏移 | 选项卡位置整体偏移量 |
文字偏移 | 选项卡内文字偏移量 |
宽度权重比 | 即选项卡宽度权重，按空间比例划分，权重越大，占位越多 |
背景可自定义图片或者颜色，当选择为颜色时可进一步配置默认颜色和选中颜色；
当选择为自定义时，可进一步设置默认图片和选中图片样式。
二、数据
组件数据格式
字段 | 说明 |
s | 类别 |
content | 选项卡文本内容 |
*数据格式说明
JSON数据案例
[
{
"s": "1",
"content": "Tab A"
},
{
"s": "2",
"content": "Tab B"
},
{
"s": "3",
"content": "Tab C"
},
{
"s": "4",
"content": "Tab D"
}
]数据对接详情
数据对接详情请见以下文档👇
三、交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用是 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
回调参数
当选项卡需要与其他组件进行交互时，通过设置回调参数来发送出参数。
详细的回调参数教学👉 回调的使用
自定义事件
【列表状态改变】（优先使用）
通过操控数组列表中的元素及其状态进行实现，字段类型【0】、【1】、【2】...代表数组中的第1、2、3个元素，通过判断他们的选中状态true或false实现操控。
*案例效果
首先拖入中国2d地图组件，增设数个散点指标；再拖入一个多选选项卡组件作为触发事件的组件，选择事件类型为列表状态改变。
步骤一：多选选项卡设置自定义事件，设置字段名为【0】，预期值为【1】。组件选择中国2d地图的子组件【散点】，动作【显示】。
此处的事件比较特殊，传入的字段值是一个选中状态的数组中的元素，【0】即数组中的第一个元素的状态，通过判断它的true或false进行事件处理。当检测到第一个选项的状态是非0值时，即为选中状态；检测到第一个选项的状态值为0时，即为未选中的状态，具体如下图：
*列表状态改变事件配置
同理为剩余散点设置自定义事件，只需要配置显示事件，当检测到选项卡的选中状态为【0】即不选中时，检测到条件不通过，该选项对应的组件就会被隐藏。
案例下载👉📎列表状态改变_697013.zip
【选项状态改变】
该事件通过选项的索引值【index】和选中状态【state】进行双重判断。只有当选中该选项并且选中状态为true或fasle才形成一个完整的事件流。效果呈现同上。
步骤一：拖入多选选项卡和被操控的组件。选中多选选项卡，为其添加自定义事件【选项状态改变】。
*选项状态改变
步骤二：添加一个事件，在条件中加入两个判断状态：①index=0 代表选中了第一个选项 ②state=1 代表该选项为选中的状态。绑定相应组件后，设置自定义动作为【显示】（注：针对该事件类型，需要关闭【自动模式】，并配置一个相反状态的隐藏事件，形成一个完整的事件，否则将因自动模式规则，无法实现多选效果）
*自定义条件设置
步骤三：在事件一的基础上，生成一个新的事件，改变state的状态为0，并设置自定义动作为隐藏，此时才完成对一个组件选中和未选中的完整事件配置。同理对其他的选项添加相同的事件配置
案例下载👉📎选项状态改变_696731.zip
实操demo：
多选项卡交互
教学视频
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0