页签组件的每个页签都可以批量绑定多个不同类型的组件,用于控制绑定该页签的所有组件显示还是隐藏。每个页签绑定的组件不相冲突,绑定的组件只能在其绑定的页签下显示,当切换到其它页签时,隐藏这些组件。
页签组件不支持绑定页签组件。 |
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)效果如下图所示:
页签下拉菜单用于设置页签。
设置项说明如下:
功能 | 说明 | ||
---|---|---|---|
页签操作 | 添加 | 添加一个新的页签。 | |
删除 | 删除所选择的页签。 | ||
绑定组件 | 选择需要绑定在当前页签页面下的组件。
| ||
显示边界辅助线 | |||
页签顺序 | 移至最左 | 将所选择的页签移动到最左侧。 | |
左移页签 | 将所选择的页签向左移动一个位置。 | ||
右移页签 | 将所选择的页签向右移动一个位置。 | ||
移至最右 | 将所选择的页签移动到最右侧。 | ||
高级设置 | 在高级设置窗口可自由调整页签顺序。 选择需要调整顺序的页签(可按住 Ctrl 键进行多选),点击顺序按钮调整顺序:
| ||
移除页签 | 删除所选择的页签。 |
页签的设置项包含轮播、方向、页签宽度、页签间隔、风格和样式。
说明
设置页签的轮流切换时间,仅在浏览状态下生效。默认为关闭。
效果
设置轮播时间为3S
说明
设置页签的排列方向和对齐方式。默认为水平居左。
效果
说明
设置页签的宽度。默认为自动,即根据页签文本宽度自适应。
效果
设置页签宽度为100px
说明
设置页签之间的间隙宽度。默认为2px。
效果
设置页签间隔为20px
说明
设置页签的风格。默认为卡片。
效果
说明
设置页签的样式以及高亮页签(即当前页签)的样式,包含 默认 和 自定义 两种。
效果
样式选择 自定义 ,其余配置如下:
补充说明
1、图片仅支持上传小于或等于10M的文件:小于300kb 直接上传,300kb-10M 会进行压缩,>10M提示不能上传。
2、图片文件格式支持:jpg、jpeg、png、gif、svg。
3、页签背景选择图片时,图片的拉伸方式有:适应、平铺、拉伸、填充。
拉伸方式 | 效果 | 说明 |
---|---|---|
适应 | 图片等比缩放,图片的最大边放大到页签最小边时就不再放大,即保持图片比例的同时最大化显示图片。 | |
平铺 | 若图片大小小于页签大小,则图片挨个排列,直到排满整个页签。 | |
拉伸 | 图片不按比例缩放,根据屏幕显示分辨率拉伸。图片占满整个页签。 | |
填充 | 图片等比缩放,按照图片的最小边来适应页签的最大边以达到填充页面效果。如果出现图片分辨率和屏幕的比例不一样的情况,图片会有部分显示不了(超出页签之外)。 |