其它组件 ⬝ 页签组件

1 概述

页签组件的每个页签都可以批量绑定多个不同类型的组件，用于控制绑定该页签的所有组件显示还是隐藏。每个页签绑定的组件不相冲突，绑定的组件只能在其绑定的页签下显示，当切换到其它页签时，隐藏这些组件。

页签组件不支持绑定页签组件。

2 业务场景

1、场景描述：页签1用于查看产品销售情况，页签2用于查看产品库存情况，效果如下图所示：

2、以产品内置Demo资源的“订单模型”作为数据来源。

3、操作步骤：

（1）在仪表盘编辑界面添加六个图标组件，摆放位置如下图所示：

（2）在仪表盘编辑界面添加一个页签组件，修改页签组件的组件设置，方向为“水平“、”居中”，样式为“自定义”，页签圆角为“5px”，如下图所示：

（3）点击页签1的下拉按钮，点击 绑定组件 ，如下图所示：

（4）在弹出的 绑定组件 弹框中勾选需要绑定在 页签1 页面下的组件，如下图 “页签1” 绑定图表_1、图表_2和图表_3。

（5） 页签2 的设置亦同理，绑定图表_4和图表_5。

（6）双击页签1修改名称为“产品销售情况”，双击页签2修改名称为“产品库存情况”，如下图所示：

（7）删除页签3，如下图所示：

（8）效果如下图所示：

3 页签下拉菜单

页签下拉菜单用于设置页签。

设置项说明如下：

功能		说明
页签操作	添加	添加一个新的页签。
页签操作	删除	删除所选择的页签。
绑定组件		选择需要绑定在当前页签页面下的组件。复制页签组件只复制组件本身，不复制组件绑定关系。切换页签时，会显示当前标签页下绑定的所有组件，无论当前组件是否被手动设置隐藏，因此若需始终隐藏的组件，请勿绑定在页签下。
显示边界辅助线
页签顺序	移至最左	将所选择的页签移动到最左侧。
	左移页签	将所选择的页签向左移动一个位置。
	右移页签	将所选择的页签向右移动一个位置。
	移至最右	将所选择的页签移动到最右侧。
	高级设置	在高级设置窗口可自由调整页签顺序。选择需要调整顺序的页签（可按住 Ctrl 键进行多选），点击顺序按钮调整顺序：上移至顶：将页签移动到最顶部。上移：将页签向上移动一个位置。下移：将页签向下移动一个位置。下移至底：将页签移动到最底部。
移除页签		删除所选择的页签。

4 页签样式设置

页签的设置项包含轮播、方向、页签宽度、页签间隔、风格和样式。

4.1 轮播

说明

设置页签的轮流切换时间，仅在浏览状态下生效。默认为关闭。

效果

设置轮播时间为3S

4.2 方向

说明

设置页签的排列方向和对齐方式。默认为水平居左。

效果

4.3 页签宽度

说明

设置页签的宽度。默认为自动，即根据页签文本宽度自适应。

效果

设置页签宽度为100px

4.4 页签间隔

说明

设置页签之间的间隙宽度。默认为2px。

效果

设置页签间隔为20px

4.5 风格

说明

设置页签的风格。默认为卡片。

效果

4.6 样式

说明

设置页签的样式以及高亮页签（即当前页签）的样式，包含默认和 自定义 两种。

效果

样式选择 自定义 ，其余配置如下：

设置页签的背景为”图片“，点击按钮上传图片，图片拉伸方式为“适应”；字体为“宋体”，字号为”12px“，字体颜色为”#000000“；圆角为”5px“。
设置高亮页签的颜色为”#4A90E2“；字体颜色为”#FFFFFF“，字体为”加粗“；边框为”实线“，线条粗细程度为”1“，线条颜色为”#08529C“。

补充说明

1、图片仅支持上传小于或等于10M的文件：小于300kb 直接上传，300kb-10M 会进行压缩，>10M提示不能上传。

2、图片文件格式支持：jpg、jpeg、png、gif、svg。

3、页签背景选择图片时，图片的拉伸方式有：适应、平铺、拉伸、填充。

拉伸方式	效果	说明
适应		图片等比缩放，图片的最大边放大到页签最小边时就不再放大，即保持图片比例的同时最大化显示图片。
平铺		若图片大小小于页签大小，则图片挨个排列，直到排满整个页签。
拉伸		图片不按比例缩放，根据屏幕显示分辨率拉伸。图片占满整个页签。
填充		图片等比缩放，按照图片的最小边来适应页签的最大边以达到填充页面效果。如果出现图片分辨率和屏幕的比例不一样的情况，图片会有部分显示不了（超出页签之外）。