1. 获取相关组件的名称

您可以在浏览器中右键点击该组件，选择 “审查”；然后在对应的 <a>标签中找到 component-name 属性的值。对于容器组件，比如target: 'hometab-group-hand'，您可以在浏览器中右键点击其中一个子组件，选择 “审查”；然后在相关的<div>标签中找到 component-name 属性的值。

侧边栏相关的组件名称汇总如下：

组件名称	描述
sidebar	整体侧边栏的外层容器
sidebar-bookmark-v2	书签面板
sidebar-thumbnail-panel	页面缩略图面板
comment-list-sidebar-panel	注释列表面板
sidebar-layers	图层面板
sidebar-attachment	PDF附件面板
sidebar-field	表单域面板

2. 获取相关组件对象，并在其回调函数中进行事件监听

如果只想要监听整体侧边栏的扩展或收缩事件，只需拿到sidebar组件对象，通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下：

pdfui.getComponentByName("sidebar").then(com => {
    com.on('expand', () => {
        console.log("sidebar激活，侧边栏扩展。")
    })
    com.on('collapse', () => {
        console.log("sidebar停用，侧边栏收缩。")
    })
});

如果需要对侧边栏中的具体某个或某几个面板的扩展/收缩事件进行监听，则需拿到对应的组件对象，然后再通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下：

pdfui.getComponentByName("sidebar-bookmark-v2").then(com => {
    com.on('active', () => {
        console.log("书签列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("书签列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-thumbnail-panel").then(com => {
    com.on('active', () => {
        console.log("页面缩略图panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("页面缩略图panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("comment-list-sidebar-panel").then(com => {
    com.on('active', () => {
        console.log("注释列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("注释列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-layers").then(com => {
    com.on('active', () => {
        console.log("图层panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("图层panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-attachment").then(com => {
    com.on('active', () => {
        console.log("附件panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("附件panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-field").then(com => {
    com.on('active', () => {
        console.log("表单列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("表单列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName('diy-sidebar-panel').then(com => {
    com.on('active', () => {
            console.log("自定义侧边栏panel激活，侧边栏扩展。")
        })
        com.on('deactive', () => {
            console.log("自定义侧边栏panel停用，侧边栏收缩。")
        })
})

 更多内容可查阅开发者手册中：“组件”-“基础组件”-“Sidebar组件”章节的内容。

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

专业获取当前页面截图的技术实现方案

PDF文档关键词搜索替换功能的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在WebSDK实现放置签名

编辑器中如何设置不同文档权限保护策略

Linux版本中如何获取电脑的UUID信息

编辑器中如何使用密码保护功能

专业获取当前页面截图的技术实现方案

PDF文档关键词搜索替换功能的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在WebSDK实现放置签名