福昕开发者文档中心

Sidebar 组件 ​

示例代码 ​

基础示例 ​

html

<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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}
html

<html>
<template id="layout-template">
    <webpdf>
        <p> Use a fixed pixel value as the initial width
        <p>
        <div>
            <sidebar width="500" open>
                <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>
        </div>
        <p> Use the scale value of window.innerWidth as the initial width </p>
        <div>
            <sidebar width="0.5" open>
                <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>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

展开和折叠 sidebar ​

html

<html>
<template id="layout-template">
    <webpdf>
        <p>Expand sidebar by default</p>
        <div>
            <sidebar open>
                <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>
        </div>
        <p>Collapse sidebar by default/p>
        <div>
            <sidebar>
                <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>
        </div>
        <div class="hide">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

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

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
            <sidebar open>
                <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>
    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>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

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

html

<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>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

API ​

模板示例：

html
<!-- 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扩展状态booleanfalse7.0.0
width如果展开的 Sidebar 的宽度大于或等于1，则将作为像素值，如果小于1，则将其作为比例值乘以 window.innerwidth 来进行计算，这样可以实现宽度自适应number310px7.0.0

sidebar-panel 属性：

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

sidebar 对象属性:

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

sidebar-panel 对象属性：

属性描述类型
disabled是否禁用 sidebar-panelboolean
isVisiblesidebar-panel 是否可见boolean
isActivesidebar-panel 是否处于活动状态boolean

方法 ​

sidebar 方法:

方法描述版本
isCollapsed(): boolean如果其状态不等于sidebarcomponent.status_expanded，则返回 true7.0.0
expand(width: number): void扩展 sidebar7.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-panel7.0
show(): void显示隐藏的 sidebar-panel7.0
hide(): void隐藏 sidebar-panel7.0
destroy(): void销毁 sidebar-panel7.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