# # Paddle 组件

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

箭头是 paddle button:

## # 代码示例

    <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>
        <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>
        <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>