福昕开发者文档中心

Paddle 组件 ​

某些时候，工具栏长度会超过屏幕宽度，这样会导致工具栏内容被遮挡。paddle 组件在工具栏内容被屏幕遮挡时会在工具栏两端显示按钮，点击两个按钮左右翻动工具栏就可以显示被隐藏的内容。

箭头是 paddle button:

paddle_btn.jpg

代码示例 ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <toolbar>
                <paddle>
                    <div class="flex-div">
                        <hand-button></hand-button>
                        <selection-button></selection-button>
                        <zoom-dropdown></zoom-dropdown>
                        <create-note-button></create-note-button>
                        <create-text-highlight-button></create-text-highlight-button>
                        <create-strikeout-button></create-strikeout-button>
                        <create-underline-button></create-underline-button>
                        <create-squiggly-button></create-squiggly-button>
                        <create-replace-button></create-replace-button>
                        <create-caret-button></create-caret-button>
                        <create-typewriter-button></create-typewriter-button>
                        <create-callout-button></create-callout-button>
                        <create-textbox-button></create-textbox-button>
                        <create-drawings-dropdown></create-drawings-dropdown>
                        <create-area-highlight-button></create-area-highlight-button>
                        <create-pencil-button></create-pencil-button>
                        <eraser-button></eraser-button>
                        <stamp-dropdown></stamp-dropdown>
                        <create-measure-dropdown></create-measure-dropdown>
                        <create-attachment-button></create-attachment-button>
                        <create-image-button></create-image-button>
                        <create-link-button></create-link-button>
                    </div>
                </paddle>
            </toolbar>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .flex-div {
        display: flex;
    }
    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
</style>
<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>

paddle 组件的 exclude-devices 参数可以配置在指定的设备类型上隐藏左右翻动按钮，并允许用户在触摸屏上左右拖动显示被遮挡的内容。

html
<html>
    <template id="layout-template">
        <webpdf>
            <toolbar>
                <!-- exclude all tablet devices -->
                <paddle exclude-devices="tablet">
                    <div class="flex-div">
                        <hand-button></hand-button>
                        <selection-button></selection-button>
                        <zoom-dropdown></zoom-dropdown>
                        <create-note-button></create-note-button>
                        <create-text-highlight-button></create-text-highlight-button>
                        <create-strikeout-button></create-strikeout-button>
                        <create-underline-button></create-underline-button>
                        <create-squiggly-button></create-squiggly-button>
                        <create-replace-button></create-replace-button>
                        <create-caret-button></create-caret-button>
                        <create-typewriter-button></create-typewriter-button>
                        <create-callout-button></create-callout-button>
                        <create-textbox-button></create-textbox-button>
                        <create-drawings-dropdown></create-drawings-dropdown>
                        <create-area-highlight-button></create-area-highlight-button>
                        <create-pencil-button></create-pencil-button>
                        <eraser-button></eraser-button>
                        <stamp-dropdown></stamp-dropdown>
                        <create-measure-dropdown></create-measure-dropdown>
                        <create-attachment-button></create-attachment-button>
                        <create-image-button></create-image-button>
                        <create-link-button></create-link-button>
                    </div>
                </paddle>
            </toolbar>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .flex-div {
        display: flex;
    }
    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
    /* use native scrollbar in tablet device  */
    .fv__ui-tablet .fv__ui-toolbar {
        overflow-y: auto;
    }
</style>
<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>

可使用的设备值包括：

mac, ios, iphone, ipad, ipod, android, webos, kindle, tablet, mobile, desktop, xiaomi, huawei, touch。

默认情况下，连续单击工具栏尾端的 paddle button 会将工具移动到最开始或最尾端的位置。然而，当工具栏长度是屏幕宽度两倍时，中间工具将不会显示。为了避免此问题，您可以在 paddle 组件中设置步长。

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <paddle step="200">
                <div class="flex-div">
                    <hand-button></hand-button>
                    <selection-button></selection-button>
                    <zoom-dropdown></zoom-dropdown>
                    <create-note-button></create-note-button>
                    <create-text-highlight-button></create-text-highlight-button>
                    <create-strikeout-button></create-strikeout-button>
                    <create-underline-button></create-underline-button>
                    <create-squiggly-button></create-squiggly-button>
                    <create-replace-button></create-replace-button>
                    <create-caret-button></create-caret-button>
                    <create-typewriter-button></create-typewriter-button>
                    <create-callout-button></create-callout-button>
                    <create-textbox-button></create-textbox-button>
                    <create-drawings-dropdown></create-drawings-dropdown>
                    <create-area-highlight-button></create-area-highlight-button>
                    <create-pencil-button></create-pencil-button>
                    <eraser-button></eraser-button>
                    <stamp-dropdown></stamp-dropdown>
                    <create-measure-dropdown></create-measure-dropdown>
                    <create-attachment-button></create-attachment-button>
                    <create-image-button></create-image-button>
                    <create-link-button></create-link-button>
                </div>
            </paddle>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>
    .flex-div {
        display: flex;
    }

    .fv__ui-toolbar {
        border: 1px solid #ddd;
    }
</style>
<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>