---
title: "組件拼接使用說明"
description: "一、什麼是組件拼接？1. 組件拼接說明通常由選項卡（Tabs）和對應的內容面板組成。 目前桌面端僅在「自適應佈局」模式下，支援將多個進行元件拼接，可同時在一個區域透過切換 Tabs 實作檢視多個元件內容。 當點擊切換 Tabs 時，對應的內容面板會被顯示出來，而其他元件內容將會被隱藏起來。 可以有效的解決電腦螢幕太小，同時使用多個元件平鋪而造成的資料遮蔽問題。透過使用組件拼接，可以使用直覺、高效的方式來存取和切換不同的功能組件模組，提升使用者體驗和介面的可用性。前置說明：2. 組件拼接主要特色提供清晰的導航：透過 Tabs 的方式，使用者可以輕鬆切換到所需的功能或元件，從而提供了直覺的導航體驗。節省空間：元件拼接將多個元件內容放在一個頁面區域上，透過切換 Tabs 來顯示不同的內容，節省了頁面空間。避免頁面刷新：由於 Tab 拼接是在客戶端切換和顯示內容面板，因此可避免整個頁面的刷新，提供更流暢的互動體驗。"
slug: "pcezrl"
locale: "zh-HK"
region: "hk"
region_label: "Hong Kong"
url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/pcezrl.md"
updated_at: "2025-10-17T02:47:56.000Z"
category: "longbridgepro"
category_title: "桌面端功能"
references:
  related:
    - title: "圖表交易的附加單設置介紹"
      url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/desktop-attach-order.md"
    - title: "桌面端組件、佈局說明"
      url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/z3znzt.md"
    - title: "市場深度功能介紹"
      url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/Desktop_Depth_of_Market.md"
    - title: "圖表交易介紹"
      url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/9o4yiz.md"
    - title: "桌面端快捷鍵說明"
      url: "https://longbridge.com/hk/zh-HK/support/topics/longbridgepro/hotkey_rules.md"
---

# 組件拼接使用說明

[Table of Contents](https://longbridge.com/hk/zh-HK/support/toc.md)

## 一、什麼是組件拼接？

#### 1\. 組件拼接說明

通常由選項卡（Tabs）和對應的內容面板組成。 目前桌面端僅在「自適應佈局」模式下，支援將多個進行元件拼接，可同時在一個區域透過切換 Tabs 實作檢視多個元件內容。 當點擊切換 Tabs 時，對應的內容面板會被顯示出來，而其他元件內容將會被隱藏起來。 可以有效的解決電腦螢幕太小，同時使用多個元件平鋪而造成的資料遮蔽問題。

透過使用組件拼接，可以使用直覺、高效的方式來存取和切換不同的功能組件模組，提升使用者體驗和介面的可用性。

> 前置說明：
> 
> ![](https://pub-canary.lbkrs.com/social/2023/0/FvYANf83K1GNVUjfxB7UZ1Uw7fTwUAKg.jpg)

#### 2\. 組件拼接主要特色

-   提供清晰的導航：透過 Tabs 的方式，使用者可以輕鬆切換到所需的功能或元件，從而提供了直覺的導航體驗。
-   節省空間：元件拼接將多個元件內容放在一個頁面區域上，透過切換 Tabs 來顯示不同的內容，節省了頁面空間。
-   避免頁面刷新：由於 Tab 拼接是在客戶端切換和顯示內容面板，因此可避免整個頁面的刷新，提供更流暢的互動體驗。

## 二、組件拼接操作說明

#### 1\. 組件拼接時陰影色塊介紹

-   陰影色塊出現在目標元件上、下、左、右側：皆表示將新元件放置在目標元件的附近，預設不進行拼接。

![](https://pub-canary.lbkrs.com/social/2023/0/WKZJZ83mzinkzFoEhb6CHmDxHKhaACXN.jpg)

-   當陰影色塊完全佔滿目標元件時，放開滑鼠後即可實現兩個元件間的拼接。（需要使用組件拼接時，需盡量將新組件移至目標組件中間區域。）

以下範例為將「7\*24 快訊」拼接進「圖表」組件中。

![](https://pub-canary.lbkrs.com/social/2023/0/T8JJ4AgbT5GUBArUW41Xbmc8DLJbXmcw.jpg)

#### 2\. 操作組件拼接

**2.1 獨立組件拼接：**兩個獨立的組件進行拼接時，可透過滑鼠按住拖曳的形式將所需的組件拖曳至目標組件中，當目標組件中整塊出現藍色陰影塊時放開滑鼠 即可實現組件拼接。

![](https://pub-canary.lbkrs.com/social/2023/0/ayYDZG2Brn7ZGUcxTDc3CBydG9y7iL3f.jpg)

**2.2 將獨立組件拼接進現有的組合中，**可透過以下兩種方式：

-   **方式一：**將需要拼接的元件拖曳至目標元件，目標元件中整塊出現藍色陰影方塊時放開滑鼠可實現拼接，此時新元件將在最後一個 Tab。

![](https://pub-canary.lbkrs.com/social/2023/0/PDG9gfVguCFXiAdAMokraCxBNK2X86Hs.jpg)

-   **方式二：**新組件可拖曳至頂部選項卡處，選項卡位置將出現藍色陰影塊，鬆開手後可將新組件拼接進目標組中，此時新組件將在最後一個 Tab。

![](https://pub-canary.lbkrs.com/social/2023/0/Zeq1Z8jSo6KPSaYVBnmKAprNH4UdWv8R.jpg)

**2.3 已拼接組件整體移動：**按住拼接組件 Tabs 的空白區域，可將拼接組件整體進行移動。 放置位置陰影色塊參考本說明 2.1 項。

![](https://pub-canary.lbkrs.com/social/2023/0/1KCrLhCeWTQKxQkzfpMiupru64sqX5aW.jpg)

#### 3\. 調整拼接組件中選項卡位置

選中選項卡上需要移動的元件 Tab，滑鼠按住進行拖曳（Tips：拖曳時滑鼠下將出現目前元件的縮圖，縮圖參考元件工具箱），當目標 Tab 上出現藍色陰影方塊時 ，則表示鬆手後該組件將移動至此處。

![](https://pub-canary.lbkrs.com/social/2023/0/Dt7MzWt8uRD5Kw3gpmrPAwddKzBqLKj3.jpg)

#### 4\. 移除拼接組件中的組件

**4.1 將元件移除成獨立元件在面板中使用：**按住目標元件的 Tab 進行拖曳，當移動的位置出現藍色陰影方塊時放開手即可移動成功。

![](https://pub-canary.lbkrs.com/social/2023/0/DxJHDbUFB72UDgKrH59grwkDg4Guowag.jpg)

**4.2 不需要使用某個組件時，在拼接組件中將該組件移除：**在...更多功能中找到 “移除”，點擊即可將組件移除。

![](https://pub-canary.lbkrs.com/social/2023/0/7qU2P5rEBp2tkFQgMdGGgws4mmPQ7GgK.jpg)

**4.3 需要將拼接組件中的某個組件獨立視窗使用時：**在...更多功能中找到 “脫離”，點擊即可將組件脫離成獨立視窗使用。

![](https://pub-canary.lbkrs.com/social/2023/0/p8vXt14ynhvQi8uckVZf44j8tgPWxC5W.jpg)

**特別說明：**

為了保障效能及使用者體驗，目前同一個頁面上最多僅支援開啟 15 個元件，使用了元件拼接將佔用元件上限數。

---

> **Disclaimer**: This article is for reference only and does not constitute any investment advice. Content provided by [Longbridge](https://longbridge.com).