自定义面板

面板是 WebViewer UI 中的动态组件，旨在通过在左侧或右侧显示内容来增强用户交互。本指南提供了将预构建面板和自定义面板集成到用户界面中的详细说明和示例，从而实现无缝集成。

预制面板

该用户界面包含一系列预配置面板，旨在满足常见的功能需求，例如缩略图操作和文档大纲导航。通过使用提供的 API，您可以将这些面板无缝集成到您的用户界面中。此外，您还可以灵活地自定义面板的各种行为，例如面板在用户界面中的打开位置。

预制面板列表

• leftPanel
• rightPanel
• pageModePanel
• stampPanel
• linkPanel
• contentEditorPanel
• stylePanel
• colorSeparationPanel

集成预制面板

要集成预置面板，请使用 addPanel API，并指定必要的属性，例如 dataElement、location 和 render 。对于预置面板，render 对应于一个字符串标识符；而对于自定义面板，它涉及一个返回面板元素的函数。

// 菜单面板
instance.UI.addPanel({
  dataElement: 'leftPanel',
  location: 'left',
  render: 'leftPanel'
});

// 页面模式面板
instance.UI.addPanel({
  dataElement: 'pageModePanel',
  location: 'right',
  render: 'pageModePanel'
});

要打开面板，您可以使用 API openElement。 使用面板的 dataElement。您还可以向 UI 添加一个切换按钮，并将面板的选择器用作按钮的 toggleElement。

// 使用 openElement API 打开页面模式面板
instance.UI.openElement('pageModePanel');

// 使用切换按钮打开页面模式面板
const newToggleButton = {
  type: 'toggleElementButton',
  element: 'pageModePanel',
  dataElement: 'pageModePanelButton',
  text: 'Page Mode'
};
instance.UI.setHeaderItems(header => {
  header.push(newToggleButton);
});

添加自定义面板

如果您想进一步自定义 UI，模块化 UI 框架允许您完全按照自己的意愿构建面板。这意味着您可以创建与应用程序需求完美契合的特殊组件。使用预置选项创建面板时，您仍然可以使用相同的属性。但是，您不再直接将面板元素标识符传递给 render 属性，而是传递一个返回面板元素的函数。该元素可以是使用 JavaScript 构建的 DOM 元素，从而让您可以灵活地根据特定需求定制 UI 组件。

// 添加用 JS 和 DOM 元素构建的面板
instance.UI.addPanel({
  dataElement: 'customPanel',
  location: 'left',
  render: () => {
    const div = document.createElement('div');
    div.innerHTML = 'My custom panel';
    return div;
  }
});

// 您可以为此面板添加一个切换按钮
const customPanelToggle = {
  type: 'toggleElementButton',
  dataElement: 'customPanelToggle',
  element: 'customPanel',
  text: 'Custom Panel'
};
instance.UI.setHeaderItems(header => {
  header.push(customPanelToggle);
});

使用面板

添加面板

要将面板集成到您的用户界面中，首先需要使用 addPanel 方法注册它们。此步骤使面板可以在您的界面中使用。有关使用此方法的详细指南（包括所有可用选项），请参阅本文档前面的章节。

instance.UI.addPanel({
  dataElement: 'customPanel',
  location: 'left',
  render: () => {
    const div = document.createElement('div');
    div.innerHTML = 'My custom panel';
    return div;
  }
});

获取面板

此 API 会获取当前 UI 中可使用的所有模块化面板的完整列表。获取此列表后，您可以选择任何特定面板，并使用下述 API 修改其属性。

const panelsList = instance.UI.getPanels();

设置面板

如果要修改面板列表，可以使用 JavaScript 方法修改数组，然后调用 setPanels API 并将修改后的列表作为参数来更新面板列表​​。

const panelsList = instance.UI.getPanels();

panelsList.pop();

instance.UI.setPanels(panelsList);

删除

此 API 会从用户界面中删除面板，使其无法再次使用。已删除的面板仍会保留在面板列表中，但不会再显示在用户界面中。

const panelsList = instance.UI.getPanels();

// 删除第一个面板
panelsList[0].delete();

设置位置

此方法允许您更改模块化 UI 中面板的位置。它接收一个字符串，指示面板的新位置。location 属性的可用值为 right 和 left 。

const panelsList = instance.UI.getPanels();

// 找到要更改位置的面板，例如 pageModePanel
const panel = panelsList.find(panel => panel.dataElement === 'pageModePanel');

// 将其位置设置为左侧
panel.setLocation('left');

// 您还可以通过属性设置位置
panel.location = 'left';

显示/隐藏面板

可以使用 openElement/closeElement 方法打开/关闭指定面板，使用 isElementOpen 方法获取指定面板是否为打开的状态。

// 打开左侧菜单面板
instance.UI.openElement('leftPanel');
instance.UI.openElements(['leftPanel']);

// 关闭左侧菜单面板
instance.UI.closeElement('leftPanel');
instance.UI.closeElements(['leftPanel']);

// 菜单面板是否为打开状态
instance.UI.isElementOpen('leftPanel');

切换标签

如果您想切换面板里的标签页，需要先确定面板和标签的参数，再使用setActiveElementTab方法切换标签。

例如，将左侧边栏切换至注释标签：

1. 在浏览器的DOM查看器中找到注释标签的DOM元素;

2. 确定注释标签的data-element属性值为ANNOTATION;

3. 使用setActiveElementTab方法，传入指定的面板（leftPanel）和标签（ANNOTATION）参数即可。

ComPDFKitViewer.init(...)
  .then(instance => {
    const { docViewer, UI } = instance;

    docViewer.addEvent('documentloaded', async () => {
      // 打开左侧菜单面板
      UI.openElement('leftPanel');

      // 切换到左侧菜单面板的注释标签下
      UI.setActiveElementTab('leftPanel', 'ANNOTATION');
    })
  });