组件拼接使用说明

一、什么是组件拼接？

1. 组件拼接说明

通常由选项卡（Tabs）和对应的内容面板组成。目前桌面端仅在 “自适应布局” 模式下，支持将多个进行组件拼接，可同时在一个区域通过切换 Tabs 实现查看多个组件内容。当点击切换 Tabs 时，相应的内容面板会被显示出来，而其他组件内容将被隐藏起来。可以有效的解决电脑屏幕过小，同时使用多个组件平铺而造成的数据遮挡问题。

通过使用组件拼接，可以使用一种直观、高效的方式来访问和切换不同的功能组件模块，提升用户体验和界面的可用性。

前置说明注释：

2. 组件拼接主要特色

• 提供清晰的导航：通过 Tabs 的方式，用户可以轻松切换到所需的功能或组件，从而提供了直观的导航体验。
• 节省空间：组件拼接将多个组件内容放在一个页面区域上，通过切换 Tabs 来显示不同的内容，节省了页面空间。
• 避免页面刷新：由于 Tab 拼接是在客户端进行切换和显示内容面板，因此可避免整个页面的刷新，提供更流畅的交互体验。

二、组件拼接操作说明

1. 组件拼接时阴影色块介绍

• 阴影色块出现在目标组件上、下、左、右侧：均表示将新组件放置在目标组件的附近，默认不进行拼接。

上方

下方

左侧

右侧

• 当阴影色块完全占满目标组件时，松开鼠标后即可实现两个组件间的拼接。（需要使用组件拼接时，需尽量将新组件移动至目标组件中间区域。）

以下示例为将 “7*24 快讯” 拼接进 “图表” 组件中。

2. 操作组件拼接

2.1 独立组件拼接：两个独立的组件进行拼接时，可通过鼠标按住拖动的形式将所需要的组件拖动至目标组件中，当目标组件中整块出现蓝色阴影块时松开鼠标即可实现组件拼接。

2.2 将独立组件拼接进已有的组合中，可通过以下两个方式：

• 方式一：将需要拼接的组件拖动至目标组件，目标组件中整块出现蓝色阴影块时松开鼠标可实现拼接，此时新组件将在最后一个 Tab。

• 方式二：可将新组件拖动至顶部选项卡处，选项卡位置将出现蓝色阴影块，松手后可将新组件拼接进目标组中，此时新组件将在最后一个 Tab。

2.3 已拼接组件整体移动：按住拼接组件 Tabs 的空白区域，可将拼接组件整体进行移动。放置位置阴影色块参考本说明 2.1 项。

3. 调整拼接组件中选项卡位置

选中选项卡上需要移动的组件 Tab，鼠标按住进行拖动（Tips：拖动时鼠标下将出现当前组件的缩略图，缩略图参考组件工具箱），当目标 Tab 上出现蓝色阴影块时，则表示松手后该组件将移动至此处。

4. 移除拼接组件中的组件

4.1 将组件移除成独立组件在面板中使用：按住目标组件的 Tab 进行拖动，当移动的位置出现蓝色阴影块时松手即可移动成功。

4.2 不需要使用某个组件时，在拼接组件中将该组件移除：在...更多功能中找到 “移除”，点击即可将组件移除。

4.3 需要将拼接组件中的某个组件独立窗口使用时：在...更多功能中找到 “脱离”，点击即可将组件脱离成独立窗口使用。

特别说明：

为了保障性能及用户体验，目前同一个页面上最多仅支持打开 15 个组件，使用了组件拼接将占用组件上限数。