Sidebar 组件 | Foxit PDF SDK For Web

# 示例代码

# 基础示例

<html>
    <template id="layout-template">
        <webpdf>
            <div class="btn-container">
                <xbutton @controller="custom:SidebarActionController" action="collapse">collapse</xbutton>
                <xbutton @controller="custom:SidebarActionController" action="collpase.totally">collapse totally</xbutton>
                <xbutton @controller="custom:SidebarActionController" action="expand">expand</xbutton>
                <xbutton @controller="custom:SidebarActionController" action="active.layers">active layers panel</xbutton>
                <xbutton @controller="custom:SidebarActionController" action="active.bookmark">active bookmark panel</xbutton>
            </div>
            <div class="fv__ui-body">
                <sidebar name="my-sidebar">
                    <sidebar-panel name="sidebar-layers" icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                    <sidebar-panel name="sidebar-bookmark" active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                </sidebar>
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .btn-container {
        display: flex;
        padding: 10px 0;
    }
    .btn-container>.fv__ui-button + .fv__ui-button {
        margin-left: 20px;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
    .controller('SidebarActionController', {
        handle: function() {
            var action = this.component.getAttribute('action');
            var sidebar = this.getComponentByName('my-sidebar');
            switch(action) {
                case 'collapse':
                    sidebar.collapse();
                    break;
                case 'collpase.totally':
                    sidebar.collapseTotally();
                    break;
                case 'expand':
                    sidebar.expand();
                    break;
                case 'active.layers':
                    sidebar.getComponentByName('sidebar-layers').active();
                    break;
                case 'active.bookmark':
                    sidebar.getComponentByName('sidebar-bookmark').active();
                    break;
            }
        }
    })
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

将鼠标悬停在 button 上，以显示工具提示信息。

<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <xbutton @controller="custom:InsertSidebarController">Add sidebar panel</xbutton>
            </div>
            <div>
                <sidebar open name="sidebar-component-name">
                    <sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right" icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                    <sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                </sidebar>
            </div>
            <div class="hide">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('InsertSidebarController', {
            mounted: function() {
                this.count = 0;
            },
            handle: function() {
                if(this.count >= 3) {
                    return;
                }
                this.count++;
                this.getPDFUI().getComponentByName('sidebar-component-name')
                .then(sidebar => {
                    sidebar.append(
                        '<sidebar-panel icon-class="fv__icon-sidebar-bookmark" title="Dynamic sidebar panel"></sidebar-panel>'
                    );
                })
            }
        });
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function() {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function(){}
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: CustomAppearance,
            addons: []
    });
</script>

{
    "iframeOptions": {
        "style": "height: 300px"
    }
}

# API

模板示例：

<!-- The width value smaller than 1 means that is a scale value of window.innerWidth -->
<sidebar open width="500">
    <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
    <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>

sidebar 组件模板属性：

属性	描述	类型	默认值	版本
open	扩展状态	`boolean`	`false`	7.0.0
width	如果展开的 Sidebar 的宽度大于或等于1，则将作为像素值，如果小于1，则将其作为比例值乘以 `window.innerwidth` 来进行计算，这样可以实现宽度自适应	`number`	`310`px	7.0.0

sidebar-panel 属性：

属性	描述	类型	默认值	版本
title	展开的 sidebar-panel 顶部显示的字符串	`string`	`''`	7.0.0
active	是否激活 sidebar-panel	`boolean`	`false`	7.0.0

sidebar 对象属性:

属性	描述	类型
disabled	是否禁用 sidebar	`boolean`
isVisible	sidebar 是否可见	`boolean`
status	三种状态： `'SidebarComponent.STATUS_COLLAPSED'` `'SidebarComponent.STATUS_COLLAPSED_TOTALLY'` `'SidebarComponent.STATUS_EXPANDED'`	`string`

sidebar-panel 对象属性：

属性	描述	类型
disabled	是否禁用 sidebar-panel	`boolean`
isVisible	sidebar-panel 是否可见	`boolean`
isActive	sidebar-panel 是否处于活动状态	`boolean`

# 方法

sidebar 方法:

方法	描述	版本
isCollapsed(): boolean	如果其状态不等于`sidebarcomponent.status_expanded`，则返回 true	7.0.0
expand(width: number): void	扩展 sidebar	7.0.0
collapse(): void	隐藏 sidebar-panel，同时 sidebar buttons 可见	7.0.0
collapseTotally(): void	隐藏 sidebar-panel，同时sidebar buttons 不可见	7.0.0

sidebar-panel 方法：

方法	描述	版本
disable(): void	禁用 sidebar-panel。一旦禁用，则不能被激活	7.0
enable(): void	启用 sidebar-panel	7.0
show(): void	显示隐藏的 sidebar-panel	7.0
hide(): void	隐藏 sidebar-panel	7.0
destroy(): void	销毁 sidebar-panel	7.0

# 事件

Sidebar 事件：

事件名称	描述	示例	版本
`COMPONENT_EVENTS.EXPAND`	当扩展 sidebar 时触发	`sidebar.on(COMPONENT_EVENTS.EXPAND, () => void)`	7.0.0
`COMPONENT_EVENTS.COLLAPSE`	当收缩 sidebar 时触发	`sidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void)`	7.0.0

Sidebar-panel 事件：

事件名称	描述	示例	版本
active	当激活 sidebar-panel 时触发	`sidebarPanel.on('active', () => {})`	7.0.0
deactive	当停用 sidebar-panel 时触发	`sidebarPanel.on('deactive', () => {})`	7.0.0
shown	当显示 sidebar-panel 时触发	`sidebarPanel.on('shown', () => {})`	7.0.0
hidden	当隐藏 sidebar-panel 时触发	`sidebarPanel.on('hidden', () => {})`	7.0.0

← Tab 组件 Paddle 组件 →

# Sidebar 组件

# 示例代码

# 基础示例

# Sidebar 宽度

# 展开和折叠 sidebar

# Sidebar 按钮提示信息

# 使用 JavaScript 动态插入一个 sidebar 面板

# API

# Sidebar 组件模板

# Sidebar 对象属性

# 方法

# 事件