組件拼接使用說明

一、什麼是組件拼接？

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 個元件，使用了元件拼接將佔用元件上限數。