# # 预配置组件

预配置组件可以理解为一个拥有完整业务功能的组件别名，预配置组件的作用是将组件配置细节封装起来，方便复用业务组件，以及简化模板配置。

## # 自定义预配置组件

### # registerPreConfiguredComponent API

    PDFUI.module('custom', [])
    .registerPreConfiguredComponent('alias-button', {
        template: '<xbutton name="pre-configured-button"></xbutton>',
        config: [{
            target: 'pre-configured-button',
            text: 'Pre-configured button'
        }]
    })

运行示例：

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <custom:alias-button></custom:alias-button>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .registerPreConfiguredComponent('alias-button', {
                template: '<xbutton name="pre-configured-button">Pre-configured button</xbutton>',
                config: [{
                    target: 'pre-configured-button',
                    callback: function() {
                        alert('click pre-configured button')
                    }
                }]
            });
        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>

## # 内置预配置组件

### # `<hand-button>`

> 从 8.2.0 版本开始，默认使用 `<hand-ribbon-button>`。

将 state-handler 切换到 `STATE_HANDLER_HAND`

组件用法:

    <hand-button></hand-button>

相当于:

    <xbutton @tooltip tooltip-title="toolbar.tooltip.hand.title" name="hand-tool" icon-class="fv__icon-toolbar-hand" @controller="states:HandController"></xbutton>

### # `<hand-ribbon-button>`

> 8.2.0 版本中新添加的。

将 state-handler 切换到 `STATE_HANDLER_HAND`

组件用法:

    <hand-ribbon-button></hand-ribbon-button>

相当于:

    <ribbon-button text="toolbar.tooltip.hand.title" @tooltip tooltip-title="toolbar.tooltip.hand.title" name="hand-tool" icon-class="fv__icon-toolbar-hand" @controller="states:HandController"></ribbon-button>

### # `<selection-dropdown>`

> 从 8.2.0 版本开始，默认使用 `<selection-ribbon-dropdown>`。

选择下拉框，包含 `select-text-image` 和 `select-annotation` 按钮。

组件用法:

    <selection-dropdown></selection-dropdown>

相当于:

    <dropdown @tooltip @controller="selection:SelectionDropdownController" name="selection-dropdown" class="fv__ui-dropdown-hide-text" selected="0">
        <select-text-image-button @controller="states:SelectTextImageController"></select-text-image-button>
        <select-annotation-button @controller="states:SelectAnnotationController"></select-annotation-button>
    </dropdown>

### # `<selection-ribbon-dropdown>`

> 8.2.0 版本中新添加的。

选择下拉框，包含 `select-text-image` 和 `select-annotation` 按钮。

组件用法:

    <selection-ribbon-dropdown></selection-ribbon-dropdown>

相当于:

    <ribbon-button @tooltip @controller="selection:SelectionDropdownController" name="selection-dropdown" @var.self="$component" has-select="true">
        <selection-dropdown @on.selected="self.select($args[0])"></selection-dropdown>
    </ribbon-button>

### # `<select-text-image-button>`

将 state-handler 切换到 `STATE_HANDLER_SELECT_TEXT_IMAGE`

组件用法:

    <select-text-image-button></select-text-image-button>

相当于:

    <xbutton @controller="states:SelectTextImageController" name="select-text-image" icon-class="fv__icon-toolbar-select-text-image">toolbar.buttons.selectTextImage
    </xbutton>

### # `<select-annotation-button>`

将 state-handler 切换到 `STATE_HANDLER_SELECT_ANNOTATION`

组件用法:

    <select-annotation-button></select-annotation-button>

相当于:

    <xbutton @controller="states:SelectAnnotationController" name="select-annotation" icon-class="fv__icon-toolbar-select-annotation">toolbar.buttons.selectAnnotation
    </xbutton>

### # `<snapshot-button>`

> 从 8.2.0 版本开始，默认使用 `<snapshot-ribbon-button>`。

将 state-handler 切换到 `STATE_HANDLER_SNAPSHOT_TOOL`

组件用法:

    <snapshot-button></snapshot-button>

相当于:

    <xbutton @controller="states:SnapshotToolController" @tooltip tooltip-title="toolbar.buttons.snapshot" name="snapshot-button" icon-class="fv__icon-toolbar-snapshot">toolbar.buttons.snapshot</xbutton>

### # `<snapshot-ribbon-button>`

> 8.2.0 版本中新添加的。

将 state-handler 切换到 `STATE_HANDLER_SNAPSHOT_TOOL`

组件用法:

    <snapshot-ribbon-button></snapshot-ribbon-button>

相当于:

    <ribbon-button
        text="toolbar.buttons.snapshot"
        @controller="states:SnapshotToolController"
        @tooltip
        tooltip-title="toolbar.buttons.snapshot"
        name="snapshot-button"
        icon-class="fv__icon-toolbar-snapshot"
    >toolbar.buttons.snapshot</ribbon-button>

### # `<change-color-dropdown>`

> 从 8.2.0 版本开始，默认使用 `<change-color-ribbon-dropdown>`。

颜色下拉框，可以改变 PDF viewer 的背景颜色。

组件用法:

    <change-color-dropdown></change-color-dropdown>

相当于:

    <dropdown
        name="change-color-dropdown"
        @controller="change-color:ChangeColorController as ctrl"
        @tooltip tooltip-title="toolbar.tooltip.changeColor.title"
        icon-class="fv__icon-toolbar-change-color"
        popup-class="fv__ui-change-color-dropdown-popup"
        class="fv__ui-change-color-dropdown"
        separate="false"
        @init="ctrl.dropdown = $component"
        changeIconCls="false"
    >
        <xbutton
            @foreach="color in colors track by background"
            @class="'fv__ui-change-color-dropdown-color-round ' + color.type || ''"
            @sync.attr.style="color.type === 'moon' ? '' : ('background-color:' + color.background)"
            tabindex='0'
            @on.click="ctrl.changeColor(color, $index)"
        ></xbutton>
    </dropdown>

### # `<change-color-ribbon-dropdown>`

> 8.2.0 版本中新添加的。

颜色下拉框，可以改变 PDF viewer 的背景颜色。

组件用法:

    <change-color-ribbon-dropdown></change-color-ribbon-dropdown>

相当于:

    <ribbon-button  name="change-color-dropdown" @controller="change-color:ChangeColorController as ctrl" @tooltip tooltip-title="toolbar.tooltip.changeColor.title" text="toolbar.tooltip.changeColor.title" icon-class="fv__icon-toolbar-change-color" @var.self="$component" not-immediately="true" >
        <dropdown
            popup-class="fv__ui-change-color-dropdown-popup" class="fv__ui-change-color-dropdown" separate="false"
            @init="ctrl.dropdown = $component"
        >
            <xbutton
                @foreach="color in colors track by background"
                @class="'fv__ui-change-color-dropdown-color-round ' + color.type || ''"
                @sync.attr.style="color.type === 'moon' ? '' : ('background-color:' + color.background)"
                tabindex='0'
                @on.click="ctrl.changeColor(color, $index)"
            ></xbutton>
        </dropdown>
    </ribbon-button>

### # `<open-file-dropdown>`

> 从 8.2.0 版本开始，默认使用 `<open-file-ribbon-dropdown>`。

打开本地文件按钮和打开 url 文件按钮的下拉菜单。

组件用法:

    <open-file-dropdown></open-file-dropdown>

相当于:

    <dropdown @controller="OpenFileDropdownController" name="open-file-button-list" class="fv__ui-dropdown-hide-text" @cannotBeDisabled>
        <file-selector
            @controller="file:OpenLocalFileController"
            icon-class="fv__icon-toolbar-open"
            name="open-local-file"
            accept=".pdf,.gif,.jpeg,.jpg,.png,.bmp"
            @cannotBeDisabled
        >toolbar.buttons.openfile</file-selector>
        <xbutton
            @controller="file:OpenRemoteFileController"
            icon-class="fv__icon-toolbar-open-url"
            name="open-from-url"
            @cannotBeDisabled
        >toolbar.buttons.openFromUrl</xbutton>
    </dropdown>

### # `<open-file-ribbon-dropdown>`

> 8.2.0 版本中新添加的。

打开本地文件按钮和打开 url 文件按钮的下拉菜单。

组件用法:

    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>

相当于:

    <ribbon-button name="open-file-button-list" @cannotBeDisabled @var.self="$component">
        <dropdown
            @controller="OpenFileDropdownController"
            name="open-file-button-list"
            class="fv__ui-dropdown-hide-text"
            @cannotBeDisabled
        >
        <file-selector
            @controller="file:OpenLocalFileController"
            icon-class="fv__icon-toolbar-open"
            name="open-local-file"
            accept=".pdf,.gif,.jpeg,.jpg,.png,.bmp"
            @cannotBeDisabled
        >toolbar.buttons.openfile</file-selector>
        <xbutton
            @controller="file:OpenRemoteFileController"
            icon-class="fv__icon-toolbar-open-url"
            name="open-from-url"
            @cannotBeDisabled
        >toolbar.buttons.openFromUrl</xbutton>
    </dropdown>
    </ribbon-button>

### # `<download-file-button>`

> 从 8.2.0 版本开始，默认使用 `<download-file-ribbon-button>`。

点击下载当前打开的 PDF 文件的按钮。

组件用法:

    <download-file-button></download-file-button>

相当于:

    <xbutton @tooltip tooltip-title="toolbar.buttons.download" name="download-file-button" icon-class="fv__icon-toolbar-download" @controller="file:DownloadFileController">toolbar.buttons.download</xbutton>

### # `<download-file-ribbon-button>`

> 8.2.0 版本中新添加的。

点击下载当前打开的 PDF 文件的按钮。

组件用法:

    <download-file-ribbon-button></download-file-ribbon-button>

相当于:

    <ribbon-button
        @tooltip
        text="toolbar.buttons.download"
        tooltip-title="toolbar.buttons.download"
        name="download-file-button"
        icon-class="fv__icon-toolbar-download"
        @controller="file:DownloadFileController"
    >toolbar.buttons.download</ribbon-button>

### # `<print:print-button>` 和 `<print:print-dialog>`

`<print:print-button>` 用来显示 `<print:print-dialog>`

这些组件定义在 print addon，在使用它之前，你应该添加 print addon 到 `addons:[]`。有关 addon 更详细的信息，请参阅 addon简介。

组件用法:

首先，在工具栏内或任何你需要的地方定义 `<print:print-button>` (从 8.2.0 版本开始，默认使用 `<print:print-ribbon-button>`：

    <print:print-button></print:print-button>

相当于:

    <xbutton @tooltip tooltip-title="print:button-tooltip.title" name="print-button" icon-class="fv__icon-toolbar-print" @controller="print:ShowPrintDialogController">print:button-tooltip.title</xbutton>

其次，在 `<template>` tag 中定义 `<print:print-dialog>`：

    <print:print-dialog></print:print-dialog>

这个组件非常重要，如果没有定义这个组件，用户将无法看到打印配置的对话框。

### # `<print:print-ribbon-button>`

> 8.2.0 版本中新添加的。

用来显示 `<print:print-dialog>`

组件用法：

    <print:print-ribbon-button></print:print-ribbon-button>

相当于：

    <ribbon-button
        text="print:button-tooltip.title"
        @tooltip
        tooltip-title="print:button-tooltip.title"
        name="print-button"
        icon-class="fv__icon-toolbar-print"
        @controller="print:ShowPrintDialogController"
    >print:button-tooltip.title</ribbon-button>

### # `<goto-prev-page-button>` 和 `<goto-next-page-button>`

该按钮用于跳转页面到上一页或下一页。

组件用法:

    <goto-prev-page-button></goto-prev-page-button>
    <goto-next-page-button></goto-next-page-button>

相当于:

    <xbutton @tooltip tooltip-title="toolbar.tooltip.previousPage.title" icon-class="fv__icon-toolbar-prev-page" name="goto-prev-page" @controller="gotoview:GotoPrevPageController"></xbutton>
    <xbutton @tooltip tooltip-title="toolbar.tooltip.nextPage.title" icon-class="fv__icon-toolbar-next-page" name="goto-next-page" @controller="gotoview:GotoNextPageController"></xbutton>

### # `<goto-page-input>`

包含输入和文本的组件，用于显示当前页码和总页数。其允许输入页码，然后按 Enter 跳转到该页面。

组件用法:

    <goto-page-input></goto-page-input>

相当于:

    <div class="fv__ui-toolbar-gotopage">
        <number @controller="gotoview:GotoPageController" min="1" @bind.attr.max="pageNumber" @bind.value="currentPageIndex" name="gotopage-input" @on.change="onchange" @on.keydown="onkeydown"></number>
        <span class="fv__ui-toolbar-gotopage-sep">/</span>
        <text @controller="gotoview:TotalPageTextController" @sync.text="pageNumber" name="gotopage-total">0</text>
    </div>

### # `<zoom-out-button>` 和 `<zoom-in-button>`

此按钮用于放大/缩小页面。

组件用法:

    <zoom-out-button></zoom-out-button>
    <zoom-in-button></zoom-in-button>

相当于:

    <xbutton @tooltip tooltip-title="toolbar.buttons.zoomout" @controller="zoom:ZoomInAndOutController" action="zoomout" name="zoom-out" icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout</xbutton>
    <xbutton @tooltip tooltip-title="toolbar.buttons.zoomin" @controller="zoom:ZoomInAndOutController" action="zoomin" name="zoom-in" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin</xbutton>

### # `<editable-zoom-dropdown>`

此下拉菜单用于放大/缩小页面，并指定到缩放的比例。

组件用法:

    <editable-zoom-dropdown></editable-zoom-dropdown>

相当于:

template:

    <dropdown name="editable-zoom-dropdown" @controller="zoom:EditableZoomDropdownController" class="fv__ui-editable_zoom_dropdown" editable="true">
        <dropdown-button icon-class="fv__icon-toolbar-fit-page" action="fitHeight" @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitpage">toolbar.buttons.fitHeight</dropdown-button>
        <dropdown-button icon-class="fv__icon-toolbar-fit-width" action="fitWidth" @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitwidth">toolbar.buttons.fitWidth</dropdown-button>
        <li class="fv__ui-dropdown-separator"></li>
        <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'" @controller="zoom:EditableZoomToScaleValueController"></dropdown-button>
    </dropdown>,

config:

    {
        target: 'editable-zoom-dropdown',
        editOptions: {
            type: 'number',
            min: 25,
            max: 600,
            step: 1,
            value: 50,
            template: '${value}%'
        }
    }

### # `<zoom-dropdown>`

> 从 8.2.0 版本开始，默认使用 `<zoom-ribbon-dropdown>`。

这个下拉菜单用于放大或缩小页面，类似于 `<editable-zoom-dropdown>`，但是不可编辑。

组件用法:

    <zoom-dropdown></zoom-dropdown>

相当于:

    <dropdown name="dropdown-zoom" icon-class="fv__icon-toolbar-zoom-in" class="fv__ui-dropdown-hide-text" selected="0">
        <dropdown-button name="dropdown-zoom-in" action="zoomin" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin</dropdown-button>
        <dropdown-button name="dropdown-zoom-out" action="zoomout" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout</dropdown-button>
        <dropdown-button name="dropdown-zoom-fitpage" action="fitHeight" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-page">toolbar.buttons.fitHeight</dropdown-button>
        <dropdown-button name="dropdown-zoom-fitwidth" action="fitWidth" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-width">toolbar.buttons.fitWidth</dropdown-button>
        <li class="fv__ui-dropdown-separator"></li>
        <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'" @controller="zoom:ZoomToScaleValueController"></dropdown-button>
    </dropdown>

### # `<zoom-ribbon-dropdown>`

> 8.2.0 版本中新添加的。

这个下拉菜单用于放大或缩小页面。

组件用法：

    <zoom-ribbon-dropdown></zoom-ribbon-dropdown>

相当于：

    <ribbon-button name="dropdown-zoom" @var.self="$component" @tooltip >
    <dropdown @aria:label.caret="aria:labels.setzoom" icon-class="fv__icon-toolbar-zoom-in" class="fv__ui-dropdown-hide-text" selected="0" @on.selected="self.select($args[0])">
      <dropdown-button name="dropdown-zoom-in" action="zoomin" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-in" ribbon-icon="fx-icon-ribbon_home_zoomin-32" tooltip-title="toolbar.buttons.zoomin" tabindex="0">toolbar.buttons.zoomin</dropdown-button>
      <dropdown-button name="dropdown-zoom-out" action="zoomout" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-out" ribbon-icon="fx-icon-ribbon_home_zoomout-32" tooltip-title="toolbar.buttons.zoomout" tabindex="0">toolbar.buttons.zoomout</dropdown-button>
      <dropdown-button name="dropdown-zoom-fitpage" action="fitHeight" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-page" ribbon-icon="fx-icon-ribbon_home_fitpage-32" tooltip-title="toolbar.buttons.fitHeight" tabindex="0">toolbar.buttons.fitHeight</dropdown-button>
      <dropdown-button name="dropdown-zoom-fitwidth" action="fitWidth" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-width" ribbon-icon="fx-icon-ribbon_home_fitwidth-32" tooltip-title="toolbar.buttons.fitWidth" tabindex="0">toolbar.buttons.fitWidth</dropdown-button>
      <dropdown-button name="dropdown-zoom-fitvisible" action="fitVisible" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-visible" ribbon-icon="fx-icon-ribbon_home_visible-32" tooltip-title="toolbar.buttons.fitVisible" tabindex="0">toolbar.buttons.fitVisible</dropdown-button>
      <li class="fv__ui-dropdown-separator"></li>
      <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'" @controller="zoom:ZoomToScaleValueController" tabindex="0"></dropdown-button>
    </dropdown>
    </ribbon-button>

### # Page view mode buttons

页面视图模式包含一系列用于切换页面视图的按钮。

组件用法:

    <single-page-button></single-page-button>
    <continuous-page-button></continuous-page-button>
    <facing-page-button></facing-page-button>
    <continuous-facing-page-button></continuous-facing-page-button>
    <h-continuous:h-continuous-button></h-continuous:h-continuous-button>

相当于:

    <xbutton @tooltip tooltip-title="toolbar.tools.single-page" @controller="pagemode:SinglePageModeController" name="single-page" icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page</xbutton>
    <xbutton @tooltip tooltip-title="toolbar.tools.continuous-page" @controller="pagemode:ContinuousPageModeController" name="continuous-page" icon-class="fv__icon-toolbar-continuous-page">toolbar.tools.continuous-page</xbutton>
    <xbutton @tooltip tooltip="toolbar.tools.facing" @controller="pagemode:FacingPageModeController" name="facing-page" icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing</xbutton>
    <xbutton @tooltip tooltip="toolbar.tools.continuous-facing" @controller="pagemode:ContinuousFacingPageModeController" name="continuous-facing-page" icon-class="fv__icon-toolbar-facing-continuous-page">toolbar.tools.continuous-facing</xbutton>
    <xbutton @tooltip tooltip-title="h-continuous:buttons.title" @controller="h-continuous:HContinuousViewModeController" name="h-continuous-button" icon-class="fv__icon-toolbar-h-continuous-page">h-continuous:buttons.title</xbutton>

`<h-continuous:h-continuous-button>` 是定义在 h-continuous addon 中，在使用它之前，应该添加 'h-continuous' addon 到 addons 列表。有关 addon 更详细的信息，请参阅 addon简介。

从 8.2.0 版本开始，默认的页面视图模式按钮被修改为如下的组件：

    <single-page-ribbon-button></single-page-ribbon-button>
    <continuous-page-ribbon-button></continuous-page-ribbon-button>
    <facing-page-ribbon-button></facing-page-ribbon-button>
    <continuous-facing-page-ribbon-button></continuous-facing-page-ribbon-button>
    <h-continuous:h-continuous-ribbon-button></h-continuous:h-continuous-ribbon-button>

相当于：

    <ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.single-page" @controller="pagemode:SinglePageModeController" name="single-page" icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page</ribbon-button>
    <ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.continuous-page" @controller="pagemode:ContinuousPageModeController" name="continuous-page" icon-class="fv__icon-toolbar-continuous-page">toolbar.tools.continuous-page</ribbon-button>
    <ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.facing" @controller="pagemode:FacingPageModeController" name="facing-page" icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing</ribbon-button>
    <ribbon-button small="true" @tooltip tooltip-title="toolbar.tools.continuous-facing" @controller="pagemode:ContinuousFacingPageModeController" name="continuous-facing-page" icon-class="fv__icon-toolbar-facing-continuous-page">toolbar.tools.continuous-facing</ribbon-button>
    <ribbon-button small="true" @tooltip tooltip-title="h-continuous:buttons.title" @controller="h-continuous:HContinuousViewModeController" name="h-continuous-button" icon-class="fv__icon-toolbar-h-continuous-page">h-continuous:buttons.title</ribbon-button>

### # `<loupe-tool-button>` 和 `<loupe-tool-dialog>`

该按钮在被点击时会将 state-handler 切换到放大镜工具。

组件用法:

    <loupe-tool-button></loupe-tool-button>
    <template>
        <loupe-tool-dialog></loupe-tool-dialog>
    </template>

相当于:

    <xbutton name="loupe-button" icon-class="fv__icon-toolbar-loupe" class="fv__ui-toolbar-show-text-button" @tooltip tooltip-title="toolbar.tooltip.loupe.title" @controller="loupe:LoupeController">toolbar.tools.loupe</xbutton>
    <template>
        <layer name="loupe-tool-dialog" class="fv__ui-loupe-tool-dialog" @resizable>
            <layer-header class="fv__ui-loupe-tool-header" title="loupe.title" @draggable="{type: 'parent'}"></layer-header>
            <layer-view class="fv__ui-loupe-body">
            </layer-view>
            <layer-toolbar class="loupe-tool-bottom-bar" visible="false">
                <dropdown name="loupe-tool-zoom-dropdown" @controller="loupe:LoupeToolScaleListController" editable="true">
                    <dropdown-button @foreach="scaleItem in scaleList track by value" @controller="loupe:LoupeToolScaleController" @bind.text="scaleItem.text"></dropdown-button>
                </dropdown>
                <slider name="loupe-tool-zoom-slider" min="50" max="600" step="1"></slider>
                <checkbox name="loupe-tool-lock">loupe.lockButton</checkbox>
            </layer-toolbar>
        </layer>
    </template>

从 8.2.0 版本开始，`<loupe-button>` 的内部实现被调整为 `<ribbon-button>`:

    <ribbon-button
        name="loupe-button"
        icon-class="fv__icon-toolbar-loupe"
        class="fv__ui-toolbar-show-text-button"
        @tooltip tooltip-title="toolbar.tooltip.loupe.title"
        @controller="loupe:LoupeController"
    >toolbar.tools.loupe</ribbon-button>

> 备注： `<loupe-tool-button>` 和 `<loupe-tool-dialog>` 在 layout-template 需同时定义。

### # `<marquee-tool-button>`

该按钮用于将当前的 state-handler 切换成到选取工具。

组件用法:

    <marquee-tool-button></marquee-tool-button>

相当于:

    <xbutton name="marquee-button" icon-class="fv__icon-toolbar-marquee" class="fv__ui-toolbar-show-text-button" @tooltip tooltip-title="toolbar.tooltip.marquee.title" @controller="marquee:MarqueeToolController">toolbar.buttons.marquee</xbutton>

从 8.2.0 版本开始，`<marquee-tool-button>` 的内部实现被调整为 `<ribbon-button>`:

    <ribbon-button
        name="marquee-button"
        icon-class="fv__icon-toolbar-marquee"
        @tooltip
        tooltip-title="toolbar.tooltip.marquee.title"
        @controller="marquee:MarqueeToolController"
    >toolbar.buttons.marquee</ribbon-button>

### # `<fpmodule:contextmenu-item-file-property>`, `<fpmodule:file-property-button>` 和 `<fpmodule:file-property-dialog>`

`<fpmodule:contextmenu-item-file-property>` 和 `<fpmodule:file-property-button>` 在被点击时会显示 `<fpmodule:file-property-dialog>`。所有这些组件都定义在 `file-property` addon 中。在使用它之前，需要添加 `file-property` addon 到 `addons:[]`。有关 addon 更详细的信息，请参阅 addon简介。

`<fpmodule:file-property-dialog>` 组件用法：

    <fpmodule:file-property-button></fpmodule:file-property-button>
    <template>
        <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
    </template>

`<fpmodule:contextmenu-item-file-property>` 必须在 `<contextmenu>` 内部使用。

### # 创建注释的按钮

以下组件是带有初始模板的内置预配置组件，用于将当前 `state-handler` 切换到注释创建的 `state-handlers`。

#### # `<create-drawings-dropdown>`

> 从 8.2.0 开始，默认使用 `<create-drawings-ribbon-button>`。

    <dropdown @controller="drawings:DrawingsDropdownController" name="create-shape-dropdown" class="fv__ui-dropdown-hide-text">
        <create-square-button></create-square-button>
        <create-circle-button></create-circle-button>
        <create-line-button></create-line-button>
        <create-arrow-button></create-arrow-button>
        <create-polygon-button></create-polygon-button>
        <create-polyline-button></create-polyline-button>
        <create-cloud-button></create-cloud-button>
    </dropdown>

#### # `<create-drawings-ribbon-button>`

    <ribbon-button @controller="drawings:DrawingsDropdownController" name="create-shape-dropdown" @var.self="$component" not-immediately="true">
    <dropdown @aria:label.caret="aria:labels.toolbar.shape" @on.selected="self.select($args[0])" class="fv__ui-dropdown-hide-text" selected="0">
        <create-square-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-square-button>
        <create-circle-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-circle-button>
        <create-polygon-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-polygon-button>
        <create-cloud-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-cloud-button>
        <create-arrow-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-arrow-button>
        <create-line-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-line-button>
        <create-polyline-button ribbon-text="toolbar.buttons.drawing" tabindex="0"></create-polyline-button>
    </dropdown>
    </ribbon-button>

#### # `<create-note-button>`

    <xbutton name="create-text" @tooltip tooltip-title="toolbar.tooltip.note.title" @controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note</xbutton>

#### # `<create-note-ribbon-button>`

    <ribbon-button name="create-text" @tooltip tooltip-title="toolbar.tooltip.note.title" text="toolbar.tooltip.note.title" @controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note</ribbon-button>

#### # `<create-text-highlight-button>`

    <xbutton name="create-highlight" @tooltip tooltip-title="toolbar.tooltip.highlight.title" @controller="states:CreateHighlightController" icon-class="fv__icon-toolbar-text-highlight">toolbar.create.highlight</xbutton>

#### # `<create-text-highlight-ribbon-button>`

    <ribbon-button name="create-highlight" @tooltip tooltip-title="toolbar.tooltip.highlight.title" text="toolbar.tooltip.highlight.title" @controller="states:CreateHighlightController" icon-class="fv__icon-toolbar-text-highlight">toolbar.create.highlight</ribbon-button>

#### # `<create-strikeout-button>`

    <xbutton name="create-strikeout" @tooltip tooltip="toolbar.tooltip.strikeout.title" @controller="states:CreateStrikeoutController" icon-class="fv__icon-toolbar-strikeout">toolbar.create.strikeout</xbutton>

#### # `<create-strikeout-ribbon-button>`

    <ribbon-button name="create-strikeout" @tooltip tooltip-title="toolbar.tooltip.strikeout.title" text="toolbar.tooltip.strikeout.title" @controller="states:CreateStrikeoutController" icon-class="fv__icon-toolbar-strikeout">toolbar.create.strikeout</ribbon-button>

#### # `<create-underline-button>`

    <xbutton name="create-underline" @tooltip tooltip-title="toolbar.tooltip.underline.title" @controller="states:CreateUnderlineController" icon-class="fv__icon-toolbar-underline">toolbar.create.underline</xbutton>

#### # `<create-underline-ribbon-button>`

    <ribbon-button name="create-underline" @tooltip tooltip-title="toolbar.tooltip.underline.title" text="toolbar.tooltip.underline.title" @controller="states:CreateUnderlineController" icon-class="fv__icon-toolbar-underline">toolbar.create.underline</ribbon-button>

#### # `<create-squiggly-button>`

    <xbutton name="create-squiggly" @tooltip tooltip="toolbar.tooltip.squiggly.title" @controller="states:CreateSquigglyController" icon-class="fv__icon-toolbar-squiggly">toolbar.create.squiggly</xbutton>

#### # `<create-squiggly-ribbon-button>`

    <ribbon-button name="create-squiggly" @tooltip tooltip-title="toolbar.tooltip.squiggly.title" text="toolbar.tooltip.squiggly.title" @controller="states:CreateSquigglyController" icon-class="fv__icon-toolbar-squiggly">toolbar.create.squiggly</ribbon-button>

#### # `<create-replace-button>`

    <xbutton name="create-replace" @tooltip tooltip="toolbar.tooltip.replace.title" @controller="states:CreateReplaceController" icon-class="fv__icon-toolbar-replace">toolbar.create.replace</xbutton>

#### # `<create-replace-ribbon-button>`

    <ribbon-button name="create-replace" @tooltip tooltip-title="toolbar.tooltip.replace.title" text="toolbar.tooltip.replace.title" @controller="states:CreateReplaceController" icon-class="fv__icon-toolbar-replace">toolbar.create.replace</ribbon-button>

#### # `<create-caret-button>`

    <xbutton name="create-caret" @tooltip tooltip-title="toolbar.tooltip.caret.title" @controller="states:CreateCaretController" icon-class="fv__icon-toolbar-insert">toolbar.create.caret</xbutton>

#### # `<create-caret-ribbon-button>`

    <ribbon-button name="create-caret" @tooltip tooltip-title="toolbar.tooltip.caret.title" text="toolbar.tooltip.caret.title" @controller="states:CreateCaretController" icon-class="fv__icon-toolbar-insert">toolbar.create.caret</ribbon-button>

#### # `<create-typewriter-button>`

    <xbutton name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</xbutton>

#### # `<create-typewriter-ribbon-button>`

    <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>

#### # `<create-callout-button>`

    <xbutton name="freetext-callout" @tooltip tooltip-title="toolbar.tooltip.callout.title" @controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-callout" >toolbar.create.callout</xbutton>

#### # `<create-callout-ribbon-button>`

    <ribbon-button name="freetext-callout" @tooltip tooltip-title="toolbar.tooltip.callout.title" @controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-callout" >toolbar.create.callout</ribbon-button>

#### # `<create-textbox-button>`

    <xbutton name="freetext-textbox" @tooltip tooltip-title="toolbar.tooltip.textbox.title" @controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-textbox" >toolbar.create.textbox</xbutton>

#### # `<create-textbox-ribbon-button>`

    <ribbon-button name="freetext-textbox" @tooltip tooltip-title="toolbar.tooltip.textbox.title" @controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-textbox" >toolbar.create.textbox</ribbon-button>

#### # `<create-area-highlight-button>`

    <xbutton name="create-area-highlight" @tooltip tooltip="toolbar.tooltip.areaHighlight.title" @controller="states:CreateAreaHighlightController" icon-class="fv__icon-toolbar-area-highlight">toolbar.create.areahighlight</xbutton>

#### # `<create-area-highlight-ribbon-button>`

    <ribbon-button name="create-area-highlight" @tooltip tooltip-title="toolbar.tooltip.areaHighlight.title" text="toolbar.tooltip.areaHighlight.title" @controller="states:CreateAreaHighlightController" icon-class="fv__icon-toolbar-area-highlight">toolbar.create.areahighlight</ribbon-button>

#### # `<create-pencil-button>`

    <xbutton name="pencil-tool" @tooltip tooltip-title="toolbar.tooltip.pencil.title" @controller="states:CreatePencilController" icon-class="fv__icon-toolbar-pencil">toolbar.buttons.pencil</xbutton>

#### # `<create-pencil-ribbon-button>`

    <ribbon-button name="pencil-tool" @tooltip tooltip-title="toolbar.tooltip.pencil.title" @controller="states:CreatePencilController" icon-class="fv__icon-toolbar-pencil">toolbar.buttons.pencil</ribbon-button>

#### # `<eraser-button>`

    <xbutton name="eraser-tool" @tooltip tooltip-title="toolbar.tooltip.eraser.title" @controller="states:EraserController" icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser</xbutton>

#### # `<eraser-ribbon-button>`

    <ribbon-button name="eraser-tool" @tooltip tooltip-title="toolbar.tooltip.eraser.title" @controller="states:EraserController" icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser</ribbon-button>

#### # `<stamp-dropdown>`

该下拉组件用于展示创建自定义 stamp 的所有 stamp 图标和按钮。从 8.2.0 开始，默认使用 `<stamp-ribbon-dropdown>`。

    <!-- internal implementation -->

#### # `<stamp-ribbon-dropdown>`

8.2.0 版本中新添加的。其相当于 `<stamp-dropdown>`.

#### # `<create-measurement-dropdown>`

    <dropdown name="create-measurement-button-list" class="fv__ui-dropdown-hide-text" @cannotBeDisabled selected="0">
        <xbutton @tooltip tooltip-title="toolbar.buttons.tooltip.distance" name="create-distance-btn" icon-class="fv__icon-toolbar-distance" @controller="distance:CreateDistanceController">toolbar.buttons.distance</xbutton>
        <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.perimeter" name="create-perimeter-btn" icon-class="fv__icon-toolbar-perimeter" @controller="distance:CreatePerimeterController">toolbar.buttons.perimeter</xbutton>
        <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.area" name="create-area-btn" icon-class="fv__icon-toolbar-area" @controller="distance:CreateAreaController">toolbar.buttons.area</xbutton>
        <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.circleArea" name="create-circle-area-btn" icon-class="fv__icon-toolbar-areacircle" @controller="distance:CreateCircleAreaController">toolbar.buttons.area</xbutton>
    </dropdown>

#### # `<create-measure-ribbon-dropdown>`

    <ribbon-button @controller="selection:SelectionDropdownController" icon-class="fv__icon-toolbar-measurement" name="create-measurement-button-list" @var.self="$component">
        <dropdown class="fv__ui-dropdown-hide-text" @cannotBeDisabled selected="0" @on.selected="self.select($args[0])">
            <xbutton ribbon-text="toolbar.buttons.measure" @tooltip tooltip-title="toolbar.buttons.tooltip.distance" name="create-distance-btn" ribbon-icon="fx-icon-ribbon_comment_measure_distance-32" icon-class="fx-icon-sm fv__icon-toolbar-distance" @controller="distance:CreateDistanceController">toolbar.buttons.distance</xbutton>
            <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.perimeter" name="create-perimeter-btn" ribbon-icon="fx-icon-ribbon_comment_measure_perimeter-32" icon-class="fx-icon-sm fv__icon-toolbar-perimeter" @controller="distance:CreatePerimeterController">toolbar.buttons.perimeter</xbutton>
            <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.area" name="create-area-btn" ribbon-icon="fx-icon-ribbon_comment_measure_area-32" icon-class="fx-icon-sm fv__icon-toolbar-area" @controller="distance:CreateAreaController">toolbar.buttons.area</xbutton>
            <xbutton ribbon-text="toolbar.buttons.measure" @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.circleArea" name="create-circle-area-btn" ribbon-icon="fx-icon-ribbon_areacircle-32" icon-class="fx-icon-sm fv__icon-toolbar-areacircle" @controller="distance:CreateCircleAreaController">toolbar.buttons.area</xbutton>
        </dropdown>
    </ribbon-button>

#### # `<create-attachment-button>`

    <xbutton name="create-fileattachment" @tooltip tooltip-title="toolbar.tooltip.fileattachment.title" @controller="states:CreateFileAttachmentController" icon-class="fv__icon-toolbar-attachment">toolbar.create.fileattachment</xbutton>

#### # `<create-attachment-ribbon-button>`

    <ribbon-button name="create-fileattachment" @tooltip tooltip-title="toolbar.tooltip.fileattachment.title" text="toolbar.buttons.fileattachment" @controller="states:CreateFileAttachmentController" icon-class="fv__icon-toolbar-file-attachment">toolbar.create.fileattachment</ribbon-button>

#### # `<create-image-button>`

    <xbutton name="create-image" @tooltip tooltip-title="toolbar.tooltip.image.title" @controller="states:CreateImageController" icon-class="fv__icon-toolbar-image">toolbar.create.image</xbutton>

#### # `<create-image-ribbon-button>`

    <ribbon-button name="create-image" @tooltip tooltip-title="toolbar.tooltip.imageAnnot.title" @controller="states:CreateImageController" icon-class="fv__icon-toolbar-image">toolbar.create.image</ribbon-button>

#### # `<create-link-button>`

    <xbutton name="create-link" @tooltip tooltip-title="toolbar.tooltip.link.title" @controller="states:CreateLinkController" icon-class="fv__icon-toolbar-link" >toolbar.create.link</xbutton>

#### # `<create-link-ribbon-button>`

    <ribbon-button name="create-link" @tooltip tooltip-title="toolbar.tooltip.link.title" @controller="states:CreateLinkController" icon-class="fv__icon-toolbar-links" >toolbar.create.link</ribbon-button>

#### # `<multi-media:multi-media-button>`

该组件在 `multi-media` addon 中定义。在使用之前，需要将 `multi-media` addon 添加到 `addons:[]`。有关 addon 更详细的信息，请参阅 addon简介。

从 8.2.0 版本开始，默认使用 `<multi-media-ribbon-button>` 组件。

#### # `<multi-media:multi-media-ribbon-button>`

8.2.0 版本中新添加的。其功能类似于 `<multi-media:multi-media-button>`。

### # 页面对象编辑插件中的组件

#### # 定义在 `edit-graphics` addon 中的组件：

1. `<edit-graphics:contextmenu-item-properties>`:

   是一个 `<contextmenu-item>` 组件，用于显示 graphic 对象的属性对话框。

2. `<edit-graphics:contextmenu-item-delete>`:

   是一个 `<contextmenu-item>` 组件，用于删除 graphic 对象。

3. `<edit-graphics:image-contextmenu>`:

   是一个包含属性菜单和删除菜单的 `<contextmenu>` 右键菜单组件，鼠标右键点击 image graphics 页面对象时显示。

4. `<edit-graphics:contextmenu-item-set-to-back>`:

   是一个 `<contextmenu-item>` 组件，用于将 graphics 对象置底。该组件是 8.2.0 版本中新添加的。

5. `<edit-graphics:contextmenu-item-set-to-front>`:

   是一个 `<contextmenu-item>` 组件，用于将 graphics 对象置顶。该组件是 8.2.0 版本中新添加的。

#### # 定义在 `path-object` addon 中的组件：

1. `<edit-pageobjects:path-contextmenu>`:

   是一个包含属性菜单和删除菜单的 `<contextmenu>` 右键菜单组件，鼠标右键点击 path graphic 页面对象时显示。

2. `<edit-pageobjects:edit-all-objects-button>`:

该按钮用于将当前 state-handler 切换到 `edit-all` state-handler，以修改 PDF 页面中当前支持的 graphic 对象。

3. `<edit-pageobjects:path-objects-dropdown>`:

   该下拉组件用来创建不同类型的 path 对象。

### # 定义在 `text-object` addon 中的组件：

1. `<edit-text-object:add-text-button>`:

   该按钮组件用于切换 state-handler 为 `add-text`。

2. `<edit-text-object:text-bold-style-button>`:

   该按钮用于将当前编辑文本对象切换为粗细体样式。

3. `<edit-text-object:text-italic-style-button>`:

   该按钮用于将当前编辑的文本对象切换为斜体/正常样式。

4. `<edit-text-object:text-underline-button>`:

   该按钮用于将当前编辑的文本对象切换为下划线样式。

5. `<edit-text-object:font-color-picker>`:

   文本颜色选取器组件用于设置当前编辑的文本对象的文本颜色。

6. `<edit-text-object:font-style-dropdown>`:

   该下拉框组件用于设置当前编辑文本对象的字体样式和大小。

### # PDF form 组件

1. `<import-form-module:import-form-button>`

   该按钮用于选择表单文件来导入表单数据。该组件定义在 `import-form` addon 中。从 8.2.0 版本开始，默认使用 `<import-form-module:import-form-ribbon-button>`。

2. `<import-form-module:import-form-ribbon-button>`

   8.2.0 中新添加的。该组件的功能等同于 `<import-form-module:import-form-button>`。

3. `<export-form-module:export-form-dropdown>`

   该按钮用于以 XML 文件的方式导出表单数据。该组件定义在 `export-form` addon 中。

4. `<create-text-field-button>`

   从 8.2.0 版本开始，该按钮已被移除。

5. `<create-signature-field-button>`

   从 8.2.0 版本开始，该按钮已被移除。

6. `<recognition-form:recognition-form-ribbon-button>`

   该按钮用于执行表单自动识别。

7. `<form-designer:create-text-ribbon>`

   8.2.0 中新添加的。该按钮将当前的 state-handler 切换为 `CreateTextStateHandler`，来创建文本域表单部件。其功能等同于 `<create-text-field-button>`。

8. `<form-designer:create-sign-ribbon>`

   该按钮将当前的 state-handler 切换为 `CreateSignStateHandler`，来创建签名域表单部件。

9. `<form-designer:create-push-button-ribbon>`

   该按钮将当前的 state-handler 切换为 `CreatePushButtonStateHandler`，来创建按钮式表单部件。

10. `<form-designer:create-check-box-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateCheckBoxStateHandler`，来创建复选框表单部件。

11. `<form-designer:create-radio-button-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateRadioButtonStateHandler`，来创建单选框表单部件。

12. `<form-designer:create-combo-box-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateComboBoxStateHandler`，来创建组合框表单部件。

13. `<form-designer:create-list-box-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateListBoxStateHandler`，来创建列表框表单部件。

14. `<form-designer:create-image-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateImageStateHandler`，来创建图形域表单部件。

15. `<form-designer:create-date-ribbon>`

    该按钮将当前的 state-handler 切换为 `CreateDateStateHandler`，来创建日期域表单部件。

### # `<page-template:page-template-ribbon-button>`

8.2.0 中新添加的。其用于显示创建 PDF 页面模板的对话框。该组件定义在 `page-template` addon。

    <ribbon-button text="page-template:button-tooltip.title" @tooltip name="page-template-button" icon-class="fv__icon-toolbar-page-template" @controller="page-template:ShowPageTemplateDialogController">page-template:button-tooltip.title</ribbon-button>

### # `<xfa-form-module:xfa-form-button>`

8.2.0 中新添加的。其用于编辑静态XFA表单。该组件定义在 `xfa-form` addon。

    <ribbon-button text="xfa:tips.xfa" @tooltip name="xfa-form-button" icon-class="fv__icon-toolbar-xfa-form"></ribbon-button>

### # `<form-designer:showco>`

8.2.0 中新添加的。其用于显示 'Calculation Order' 对话框。

    <ribbon-button name="fv--showCO-btn" icon-class="fv__icon-toolbar-form-CO" @tooltip tooltip-title="form-designer:tips.showCO" @controller="form-designer:showCODialogController">form-designer:tips.showCO</ribbon-button>

### # `<form-designer:add-tooltip>`

8.2.0 中新添加的。其用于添加工具提示信息。

    <ribbon-button @tooltip name="fv--add-tooltip-btn" @controller="form-designer:AddTooltipController" tooltip-title="form-designer:tips.AddTooltip" icon-class="fv__icon-toolbar-add-tooltip">form-designer:tips.AddTooltip</ribbon-button>

### # `<form-designer:reset-form>`

8.2.0 中新添加的。其用于将所有表单域重置为其默认值。

    <ribbon-button @tooltip name="fv--reset-field-btn" @controller="form-designer:ResetFormController" tooltip-title="form-designer:tips.ResetForm" icon-class="fv__icon-toolbar-reset-field">form-designer:tips.ResetForm</ribbon-button>

### # `<ink-sign-dropdown>` 和 `<create-ink-sign-dialog>`

该组件用于显示所有 ink-signatures，以及创建自定义 ink-signatures。`<ink-sign-dropdown>` 和 `<create-ink-sign-dialog>` 在布局模板中需同时定义。

    <ink-sign-dropdown></ink-sign-dropdown>
    <template>
       <create-ink-sign-dialog></create-ink-sign-dialog>
    </template>

8.2.0 版本开始，默认使用 `<ink-sign-ribbon-dropdown>`。

### # `<ink-sign-ribbon-dropdown>`

8.2.0 中新添加的。其功能等同于 `<ink-sign-dropdown>`。

### # `<password-protect:password-protect-button>`

该按钮用于显示密码加密对话框，来对当前 PDF 文档进行加密。

用法

    <password-protect:password-protect-button></password-protect:password-protect-button>

### # `<password-protect:remove-protect-button>`

该按钮用于移除当前PDF文档的安全加密属性。

用法

    <password-protect:remove-protect-button></password-protect:remove-protect-button>

### # Redaction 组件

1. `<redaction:create-redactions-dropdown>`

   该按钮将当前state-handler切换为 `create-redaction-state`。

2. `<redaction:create-redactions-ribbon-dropdown>`

   8.2.0 版本中新添加的。其功能等同于 `<redaction:create-redactions-dropdown>`。

3. `<redaction:apply-redactions-button>`

   该按钮用来应用 PDF 文档中的所有密文注释。

4. `<redaction:apply-redactions-ribbon-button>`

   8.2.0 版本中新添加的。其功能等同于 `<redaction:apply-redactions-button>`。

5. `<redaction:redaction-search-button>`

   该按钮用来切换到搜索侧边栏面板。

6. `<redaction:redaction-search-ribbon-button>`

   8.2.0 版本中新添加的。其功能等同于 `<redaction:redaction-search-button>`。

7. `<redaction:create-text-image-redaction-button>`

   8.6.0 版本中新添加的。该按钮将当前 state-handler 切换为 `CreateRedactionTextAndImageStateHandler`，以标记文本和图像。

       <xbutton class="fv__ui-redaction-item"
           name="create-text-image-redaction"
           @tooltip
           tooltip-title="redaction:buttons.redact_text_image"
           @controller="redaction:RedactionTextAndImageController"
           icon-class="fx-icon-sm fv__icon-toolbar-text-image-redaction">
           redaction:buttons.redact_text_image
       </xbutton>

8. `<redaction:create-area-redaction-button>`

   8.6.0 版本中新添加的。该按钮将当前 state-handler 切换为 `CreateRedactionStateHandler`，以标记区域。

       <xbutton class="fv__ui-redaction-item"
           name="create-area-redaction"
           @tooltip
           tooltip-title="redaction:buttons.redact_area"
           @controller="redaction:RedactionController"
           icon-class="fx-icon-sm fv__icon-toolbar-area-redaction">
           redaction:buttons.redact_area
       </xbutton>

9. `<redaction:create-page-redaction-button>`

   8.6.0 版本中新添加的。该按钮用于标记页面。

       <xbutton class="fv__ui-redaction-item"
           name="create-page-redaction"
           @tooltip
           tooltip-title="redaction:buttons.redact_page"
           @controller="redaction:RedactionPageController"
           icon-class="fx-icon-sm fv__icon-toolbar-page-redaction">
           redaction:buttons.redact_page
       </xbutton>

### # sidebar 组件

1. `<bookmark-sidebar-panel>` (从 11.0.0 版本开始，该组件已被移除，并由 `<bookmark-v2:sidebar-panel>` 所取代.)
2. `<bookmark-v2:sidebar-panel>`
3. `<commentlist-sidebar-panel>`
4. `<thumbnail-sidebar-panel>`
5. `<layer-sidebar-panel>`
6. `<search-sidebar-panel>`
7. `<attachment-sidebar-panel>`

### # `<distance:ruler-container>` 和 `<distance:measurement-popup>`

该组件用来在创建 distance 注释时显示标尺和距离信息。`<viewer>` 组件必须在 `<distance:ruler-container>` 内的 `<slot>` tag 中，以及 `<distance:measurement-popup>` 必须在 `<template>` tag中。

    <distance:ruler-container name="pdf-viewer-container-with-ruler">
        <slot>
            <viewer></viewer>
        </slot>
    </distance:ruler-container>
    <template>
        <distance:measurement-popup></distance:measurement-popup>
    </template>

### # 右键菜单组件

#### # `<page-contextmenu>`

    <contextmenu name="fv--page-contextmenu" @controller="collaboration-mode:PageContextmenuController">
        <full-screen:contextmenu-item-fullscreen></full-screen:contextmenu-item-fullscreen>
        <contextmenu-separator @require-modules="full-screen" @hide-on-device="ios"></contextmenu-separator>
        <contextmenu-item-select-text-image></contextmenu-item-select-text-image>
        <contextmenu-item-select-annotation></contextmenu-item-select-annotation>
        <contextmenu-item-hand-tool></contextmenu-item-hand-tool>
        <contextmenu-item-marquee-zoom></contextmenu-item-marquee-zoom>
        <contextmenu-separator></contextmenu-separator>

        <contextmenu-item-zoom-actual-size></contextmenu-item-zoom-actual-size>
        <contextmenu-item-zoom-fitpage></contextmenu-item-zoom-fitpage>
        <contextmenu-item-zoom-fitwidth></contextmenu-item-zoom-fitwidth>
        <contextmenu-item-zoom-fitvisible></contextmenu-item-zoom-fitvisible>

        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-rotate-right></contextmenu-item-rotate-right>
        <contextmenu-item-rotate-left></contextmenu-item-rotate-left>
        <contextmenu-separator></contextmenu-separator>
        <print:contextmenu-item-print></print:contextmenu-item-print>
        <contextmenu-separator @require-modules="fpmodule"></contextmenu-separator>
        <fpmodule:contextmenu-item-file-property></fpmodule:contextmenu-item-file-property>
    </contextmenu>

#### # `<default-annot-contextmenu>`

当无法找到注释的上下文菜单，以及该注释不是 markup 类型的注释，则会默认使用 `<default-annot-contextmenu>`。

    <contextmenu name="fv--default-annot-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
    </contextmenu>

#### # `<markup-contextmenu>`

当无法找到注释的上下文菜单，以及该注释是 markup 类型的注释，则会默认使用 `<markup-contextmenu>`。

原始模板:

    <contextmenu name="fv--markup-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-cut></contextmenu-item-cut>
        <contextmenu-item-copy></contextmenu-item-copy>
        <contextmenu-item-paste></contextmenu-item-paste>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-flip></contextmenu-item-flip>
        <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
        <contextmenu-item-group></contextmenu-item-group>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
    </contextmenu>

使用:

    <markup-contextmenu name="fv--line-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--linearrow-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--linedimension-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--polylinedimention-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--polygondimension-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--circle-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--square-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--polyline-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--polygon-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--polygoncloud-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--ink-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--stamp-contextmenu"></markup-contextmenu>
    <markup-contextmenu name="fv--text-contextmenu"></markup-contextmenu>

#### # `<caret-contextmenu>`

原始模板:

    <contextmenu name="fv--caret-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-group></contextmenu-item-group>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
    </contextmenu>

使用:

    <caret-contextmenu name="fv--areahighlight-contextmenu"></caret-contextmenu>
    <caret-contextmenu name="fv--replace-contextmenu"></caret-contextmenu>
    <caret-contextmenu name="fv--caret-contextmenu"></caret-contextmenu>

#### # `<textmarkup-contextmenu>`

原始模板:

    <contextmenu name="fv--textmarkup-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-copy-text></contextmenu-item-copy-text>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-group></contextmenu-item-group>
    </contextmenu>

使用:

    <textmarkup-contextmenu name="fv--highlight-contextmenu"></textmarkup-contextmenu>
    <textmarkup-contextmenu name="fv--strikeout-contextmenu"></textmarkup-contextmenu>
    <textmarkup-contextmenu name="fv--underline-contextmenu"></textmarkup-contextmenu>
    <textmarkup-contextmenu name="fv--squiggly-contextmenu"></textmarkup-contextmenu>

#### # `<freetext-contextmenu>`

原始模板:

    <contextmenu name="fv--freetext-contextmenu">
        <contextmenu-item-cut></contextmenu-item-cut>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
        <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
        <contextmenu-item-group></contextmenu-item-group>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
    </contextmenu>

使用:

    <freetext-contextmenu name="fv--typewriter-contextmenu"></freetext-contextmenu>
    <freetext-contextmenu name="fv--callout-contextmenu"></freetext-contextmenu>
    <freetext-contextmenu name="fv--textbox-contextmenu"></freetext-contextmenu>

#### # `<action-annot-contextmenu>`

原始模板:

    <contextmenu name="fv--action-annot-contextmenu">
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
    </contextmenu>

使用:

    <action-annot-contextmenu name="fv--image-contextmenu"></action-annot-contextmenu>
    <action-annot-contextmenu name="fv--link-contextmenu"></action-annot-contextmenu>

#### # `<fileattachment-contextmenu>`

原始模板:

    <contextmenu name="fv--fileattachment-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
        <contextmenu-separator @require-modules="group-annot"></contextmenu-separator>
        <contextmenu-item-group></contextmenu-item-group>                <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
    </contextmenu>

#### # `<media-contextmenu>`

原始模板:

    <contextmenu name="fv--media-contextmenu">
        <contextmenu-item-media-download></contextmenu-item-media-download>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-properties></contextmenu-item-properties>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-media-play></contextmenu-item-media-play>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
    </contextmenu>

#### # `<sound-contextmenu>`

原始模板:

    <contextmenu name="fv--sound-contextmenu">
        <contextmenu-item-media-download></contextmenu-item-media-download>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-media-play></contextmenu-item-media-play>
    </contextmenu>

#### # `<redact-contextmenu>`

原始模板:

    <contextmenu name="fv--redact-contextmenu">
        <contextmenu-item-reply></contextmenu-item-reply>
        <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
        <contextmenu-item-delete-annot functional-module="redaction" @license-validation=""></contextmenu-item-delete-annot>
        <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
        <contextmenu-item-apply functional-module="redaction" @license-validation=""></contextmenu-item-apply>
        <contextmenu-item-apply-all functional-module="redaction" @license-validation=""></contextmenu-item-apply-all>
        <contextmenu-item-place functional-module="redaction" @license-validation=""></contextmenu-item-place>
        <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
        <contextmenu-item-properties functional-module="redaction" @license-validation=""></contextmenu-item-properties>
        <contextmenu-separator functional-module="redaction" @license-validation=""></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-default-prop></contextmenu-item-default-prop>
        <span class="fv-redact-codesets" name="codesets" @controller="annot-opr:SetPropsDefault as spdcl">
        <contextmenu-separator></contextmenu-separator>
        </span>
    </contextmenu>

#### # `<edit-graphics:image-contextmenu>`

原始模板:

    <contextmenu name="fv--image-graphics-object-contextmenu" @edit-graphics:check-activates="">
        <edit-graphics:contextmenu-item-set-to-front name="fv--contextmenu-item-image-graphics-object-set-to-front"></edit-graphics:contextmenu-item-set-to-front>
        <edit-graphics:contextmenu-item-set-to-back name="fv--contextmenu-item-image-graphics-object-set-to-back"></edit-graphics:contextmenu-item-set-to-back>
        <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
        <edit-graphics:contextmenu-item-delete name="fv--contextmenu-item-image-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
        <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
        <edit-graphics:contextmenu-item-properties name="fv--contextmenu-item-image-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
    </contextmenu>

#### # `<edit-pageobjects:path-contextmenu>`

原始模板:

    <contextmenu name="fv--path-graphics-object-contextmenu" @edit-graphics:check-activates="">
        <edit-graphics:contextmenu-item-set-to-front name="fv--contextmenu-item-image-graphics-object-set-to-front"></edit-graphics:contextmenu-item-set-to-front>
        <edit-graphics:contextmenu-item-set-to-back name="fv--contextmenu-item-image-graphics-object-set-to-back"></edit-graphics:contextmenu-item-set-to-back>
        <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
        <edit-graphics:contextmenu-item-delete name="fv--contextmenu-item-path-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
        <edit-graphics:contextmenu-separator></edit-graphics:contextmenu-separator>
        <edit-graphics:contextmenu-item-properties name="fv--contextmenu-item-path-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
    </contextmenu>

#### # `<text-field-contextmenu>`

原始模板:

    <contextmenu name='fv--text-field-contextmenu'>
        <contextmenu-item name="fv--contextmenu-item-form-sign" @controller="annot-opr:SignController">certifySign.sign</contextmenu-item>
        <contextmenu-item-form-properties></contextmenu-item-form-properties>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    </contextmenu>

> 备注: contextmenu 的名称用于内部获取菜单组件，是不能被更改的。

从 8.2.0 版本开始，该组件已被移除，并由 contextmenu-form-designer 所取代。

#### # `<bookmark-contextmenu>`

原始模板：

    <contextmenu class="bookmark-panel-contentmenu" name="fv--bookmark-contextmenu" @controller="bookmark:BookmarkSidebarMenuController">
         <contextmenu-item name="fv--contextmenu-item-add">contextmenu.bookmark.add</contextmenu-item>
         <contextmenu-separator></contextmenu-separator>
         <contextmenu-item name="fv--contextmenu-item-goTo">contextmenu.bookmark.goTo</contextmenu-item>
         <contextmenu-separator></contextmenu-separator>
         <contextmenu-item name="fv--contextmenu-item-cut">contextmenu.bookmark.cut</contextmenu-item>
         <contextmenu-item name="fv--contextmenu-item-pasteUnder">contextmenu.bookmark.pasteUnder</contextmenu-item>
         <contextmenu-item name="fv--contextmenu-item-pasteAfter">contextmenu.bookmark.pasteAfter</contextmenu-item>
         <contextmenu-item name="fv--contextmenu-item-delete-bookmark">contextmenu.bookmark.delete</contextmenu-item>
         <contextmenu-item name="fv--contextmenu-item-destination">contextmenu.bookmark.destination</contextmenu-item>
         <contextmenu-item name="fv--contextmenu-item-rename">contextmenu.bookmark.rename</contextmenu-item>
     </contextmenu>

> 从 11.0.0 版本开始，该组件已被移除，并由 bookmark-v2:bookmark-contextmenu 所取代。

#### # `<bookmark-v2:bookmark-contextmenu>`

原始模板：

    <contextmenu name="fv--bookmark-contextmenu-v2">
        <bookmark-v2:add-bookmark name="fv--bookmark-contextmenu-item-add"></bookmark-v2:add-bookmark>
        <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
        <bookmark-v2:goto-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-goto"></bookmark-v2:goto-bookmark>
        <contextmenu-separator @bookmark-v2:hide-if-no-bookmark></contextmenu-separator>
        <bookmark-v2:cut-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-cut"></bookmark-v2:cut-bookmark>
        <bookmark-v2:paste-under-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-under"></bookmark-v2:paste-under-selected-bookmark>
        <bookmark-v2:paste-after-selected-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-paste-after"></bookmark-v2:paste-after-selected-bookmark>
        <bookmark-v2:delete-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-delete"></bookmark-v2:delete-bookmark>
        <bookmark-v2:set-destination @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-set-destination"></bookmark-v2:set-destination>
        <bookmark-v2:rename-bookmark @bookmark-v2:hide-if-no-bookmark name="fv--bookmark-contextmenu-item-rename"></bookmark-v2:rename-bookmark>
    </contextmenu>

#### # `<thumbnail:thumbnail-contextmenu>`

原始模板：

    <contextmenu name="fv--thumbnail-contextmenu" @thumbnail:permission>
        <contextmenu-item feature="rotate" name="contextmenu-item-thumbnail-rotate-left" @controller="thumbnail:RotateLeftController">thumbnail:contextmenu.rotateLeft</contextmenu-item>
        <contextmenu-item feature="rotate" name="contextmenu-item-thumbnail-rotate-right" @controller="thumbnail:RotateRightController">thumbnail:contextmenu.rotateRight</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item feature="insert" name="contextmenu-item-thumbnail-add-blank-page" @controller="thumbnail:InsertBlankPageController">thumbnail:contextmenu.addBlankPage</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <thumbnail:delete-page-contextmenu-item name="contextmenu-item-thumbnail-delete"></thumbnail:delete-page-contextmenu-item>
    </contextmenu>

> 备注： 该组件在 thumbnail addon 中实现，需要加载该 addon 后才可以被使用。

#### # `<portfolio-node-contextmenu>`

    <portfolio-node-contextmenu name="fv--portfolio-file-item-contextmenu" @lazy>
        <portfolio-extract-node-contextmenu-item name="fv--portfolio-extract-node-contextmenu-item"></portfolio-extract-node-contextmenu-item>
        <portfolio-show-selected-node-information-contextmenu-item name="fv--portfolio-show-selected-node-information-contextmenu-item"></portfolio-show-selected-node-information-contextmenu-item>
    </portfolio-node-contextmenu>

### # contextmenu-form-designer

    <contextmenu name="contextmenu-form-designer">
        <contextmenu-item
            @controller="form-designer:Copy"
        >contextmenu.annot.copyAnnot</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item
            name="deleteTarget"
            @controller="form-designer:Delete"
        >contextmenu.annot.delete</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item
            name="propertiesMenu"
            @controller="form-designer:ShowPropertiesController"
        >contextmenu.annot.properties</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item
            @controller="form-designer:MultipleCopy"
        >form-designer:contextMenu.multipleCopy</contextmenu-item>
        <contextmenu-item
            name="copyToPage"
            @controller="form-designer:CopyToPage"
        >form-designer:contextMenu.copyToPage</contextmenu-item>
        <contextmenu-item
            name="setTabOrdern"
            @controller="form-designer:SetTabOrder"
        >form-designer:contextMenu.setTabOrder</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <form-designer:alignment-menu></form-designer:alignment-menu>
    </contextmenu>

### # `<text-sel:text-selection-tooltip>`

在 PDF 页面中选择文本时出现的浮动组件。

### # `<annottext>`

当鼠标移到注释上时出现的浮动组件。