# 自訂元件

- Human documentation: [https://docs.univer.ai/zh-TW/guides/pdfs/ui/components](https://docs.univer.ai/zh-TW/guides/pdfs/ui/components)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/pdfs/ui/components.md](https://docs.univer.ai/zh-TW/guides/pdfs/ui/components.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [pdfs/ui/components.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/components.zh-TW.mdx)

---

`UniverPdfsUIPlugin` 使用 Univer 標準工作臺區域組合 PDF 介面。

| 模式                     | PDF UI 外掛掛載的元件                            |
| ---------------------- | ----------------------------------------- |
| 一律掛載                   | 左側欄中的頁面縮圖列、內容區域中的 PDF Canvas，以及 PDF 底欄。   |
| `editor.enabled: true` | 功能區與快顯功能表項目、屬性面板、剪貼簿整合、插入控制項，以及編輯器專用選單元件。 |

將 `editor.enabled` 設為 `false` 會保留檢視器區域，並省略僅供編輯使用的元件與服務。

## PDF 元件邊界

PDF Canvas、縮圖列、底欄、屬性面板、表格選擇器與工具模式標籤使用的 React 檢視和元件識別碼都是內部實作細節。`@univerjs-pro/pdfs-ui` 根入口沒有匯出它們，它們也不是受支援的替換插槽。

請勿猜測或複製內部元件鍵，再透過 `univerAPI.registerComponent` 替換這些檢視。需要控制 PDF 行為時，請使用 [PDF Facade 指南](https://docs.univer.ai/zh-TW/guides/pdfs/getting-started/facade.md)中支援的 API。

## 在 PDF 旁加入應用程式層級 UI

共用 UI Facade 仍可註冊應用程式元件，並在 Univer 的一般側邊欄或對話框中顯示。它擴充的是外圍應用程式介面，不會替換 PDF 外掛元件。

```tsx
const registration = univerAPI.registerComponent(
  'pdf-help-panel',
  () => <div>PDF workflow help</div>,
)

const sidebar = univerAPI.openSidebar({
  id: 'pdf-help',
  header: { title: 'PDF help' },
  children: { label: 'pdf-help-panel' },
  width: 320,
})

// 不再需要此外掛功能時：
sidebar.dispose()
registration.dispose()
```

請在 UI Facade 載入完成後註冊元件，並在移除擴充功能時釋放兩個控制代碼。