Foxit PDF SDK For Web - V10.0.0

# Pre-configured component

Pre-configured components are set in advance with text, icons, event handling and other information and assigning an alias, and then use alias in layout template directory, It is useful to simplify the template and reuse component in different appearance templates.

# Custom pre-configured component

# registerPreConfiguredComponent API

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

Runnable example:

# Built-in pre-configured components

# <hand-button>

From version 8.2.0, <hand-ribbon-button> is used by default.

Switch the state-handler to STATE_HANDLER_HAND

Component usage:

<hand-button></hand-button>

Equivalent to:

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

# <hand-ribbon-button>

Added in version 8.2.0

Switch the state-handler to STATE_HANDLER_HAND.

Component usage:

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

Equivalent to:

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

From version 8.2.0, <selection-ribbon-dropdown> is used by default.

A dropdown with select-text-image button and select-annotation button.

Component usage:

<selection-dropdown icon-class="fx-icon-ribbon_home_selecttextandimage-32"></selection-dropdown>

Equivalent to:

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

Added in 8.2.0

A dropdown with select-text-image button and select-annotation button.

Component usage:

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

Equivalent to:

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

Switch the state-handler to STATE_HANDLER_SELECT_TEXT_IMAGE

Component usage:

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

Equivalent to:

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

# <select-annotation-button>

Switch the state-handler to STATE_HANDLER_SELECT_ANNOTATION

Component usage:

<select-annotation-button @controller="states:SelectAnnotationController"></select-annotation-button>

Equivalent to:

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

# <snapshot-button>

From version 8.2.0, <snapshot-ribbon-button> is used by default.

Switch the state-handler to STATE_HANDLER_SNAPSHOT_TOOL

Component usage:

<snapshot-button></snapshot-button>

Equivalent to:

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

Added in 8.2.0

Switch the state-handler to STATE_HANDLER_SNAPSHOT_TOOL

Component usage:

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

Equivalent to:

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

From 8.2.0, <change-color-ribbon-dropdown> is used by default.

A dropdown with colors to change background color of PDF viewer.

Component usage:

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

Equivalent to:

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

Added in 8.2.0.

A dropdown with colors to change background color of PDF viewer.

Component usage:

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

Equivalent to:

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

From version 8.2.0, <open-file-ribbon-dropdown> is used by default.

A dropdown with open-local-file button and open-url-file button.

Component usage:

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

Equivalent to:

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

Added in 8.2.0

A dropdown with open-local-file button and open-url-file button.

Compmonent usage:

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

Equivalent to:

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

From version 8.2.0, <download-file-ribbon-button> is used by default.

A button that clicks to download current opening PDF file.

Component usage:

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

Equivalent to:

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

Added in 8.2.0

A button that clicks to download current opening PDF file.

Component usage:

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

Equivalent to:

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

The function of <print:print-button> is to click to display the <print:print-dialog>

These components are defined in print addon, before using it, you should add the print addon into addons:[]. For more details about addons, please refer to Introduction to addons.

Component usage

At first, define the <print:print-button>(From version 8.2.0, <print:print-ribbon-button> is used by default) inside the toolbar or anywhere you need:

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

Its Equivalent to

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

At the second, define <print:print-dialog> inside a <template> tag:

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

This component is essential, because if this component is not defined, the user will not be able to see the print configuration dialog.

Added in 8.2.0

Click to display the <print:print-dialog>.

Component usage

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

Equivalent to

<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> and <goto-next-page-button>

These buttons are used to jump pages to previous or next.

Component usage

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

Equivalent to

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

It is a component with input and text that displays the current page number and the total number of pages. It also allows you to enter page numbers and then press enter to jump to the page.

Component usage

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

Equivalent to

<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> and <zoom-in-button>

These two buttons are used to zoom in/out of the page.

Component usage

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

Equivalent to

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

This dropdown is used to zoom in/out on the page to specify the scale value.

Component usage

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

Its equivalent to

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>

From version 8.2.0, <zoom-ribbon-dropdown> is used by default

This dropdown is used to zoom in/out on the pages like <editable-zoom-dropdown>, but it is un-editable.

Component usage

<zoom-dropdown></zoom-dropdown>

Equivalent to

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

Added in 8.2.0.

This dropdown is used to zoom in/out on the pages.

Component usage

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

Equivalent to

<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

Page view mode contains a series of buttons which are used to switch page view.

Component usage

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

Equivalent to

<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> is defined in h-continuous addon, before using it, you should add the 'h-continuous' addon into addons list. For more details about addon, please refer to Introduction to addons.

From version 8.2.0, the default page view mode buttons are changed to use these components:

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

They are equivalent to:

<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> and <loupe-tool-dialog>

A button which is used to switch state-handler to loupe tool when being clicked.

Component usage

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

Equivalent to

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

From version 8.2.0, the internal implementation of <loupe-button> has been adjusted to <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>

Note: The <loupe-tool-button> and
<loupe-tool-dialog> should be defined in layout-template at the same time.

# <marquee-tool-button>

A button which is used to switch the current state-handler to the marquee tool.

Component usage

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

Equivalent to

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

From version 8.2.0, the internal implementation of <marquee-tool-button> has been adjusted to <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> and <fpmodule:file-property-dialog>

<fpmodule:contextmenu-item-file-property> and <fpmodule:file-property-button> are used to display <fpmodule:file-property-dialog> when being clicked. All of these components are defined in the file-property addon. Before using it, you should add the file-property addon into addons:[]. For more details about addons, please refer to Introduction to addons.

Component usage<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> must be used inside of <contextmenu>.

# Buttons to create annotations

The following components are built-in pre-configured components with their initial template which are used to switch current state-handler to state-handlers for annotation creation.

# <create-drawings-dropdown>

From version 8.2.0, <create-drawings-ribbon-button> is used by default.

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

It's a dropdown component exhibits all stamp icons and a button for creating custom stamp. From version 8.2.0, <stamp-ribbon-dropdown> is used by default.

<!-- internal implementation -->

# <stamp-ribbon-dropdown>

Added in 8.2.0, It is equivalent to <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>

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

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

This component is defined in the multi-media addon. Before using it, you should add the multi-media addon into addons:[], For more details about addons, please refer to Introduction to addons.

From version 8.2.0, <multi-media-ribbon-button> is used by default.

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

Added in version 8.2.0, and its function is equivalent to <multi-media:multi-media-button>.

# Graphics object components

# Components defined in edit-graphics addon

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

    A <contextmenu-item> component that is used to show graphic object's properties dialog.

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

    A <contextmenu-item> component that is used to delete a graphic object.

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

    A <contextmenu> component with properties & delete items is used for image graphics object.

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

    A <contextmenu-item> component that is used to send a graphic object to back. Added in version 8.2.0.

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

    A <contextmenu-item> component that is used to bring a graphic object to front. Added in version 8.2.0.

# Components defined in path-object addon

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

    A <contextmenu> with properties & delete items is used for path graphic object.

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

    A button which is used to switch current state-handler to 'edit-all' state-handler to modify currently supported graphic objects in PDF page.

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

    A dropdown component which is used to create different types of path objects.

# Components defined in text-object addon

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

    A button component which is used to switch state-handler into add-text.

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

    A button to toggle the current editing text object to bold/thin style.

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

    A button to toggle the current editing text object to italic/normal style.

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

    A button to toggle the underline of current editting text object.

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

    A color-picker component which is used to set text color of current editing text object.

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

    A dropdown component which is used to set font style & size of the current editing text object.

# PDF form components

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

    A button which is used to select a form file to import form data. This component is defined in import-form addon. From version 8.2.0, <import-form-module:import-form-ribbon-button> is used by default.

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

    Added in version 8.2.0. The function of this component is equivalent to <import-form-module:import-form-button>.

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

    A button which is used to export form data as a xml file. This component is defined in export-form addon.

  4. <create-text-field-button>

    It has been removed from version 8.2.0.

  5. <create-signature-field-button>

    It has been removed from version 8.2.0.

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

    A button which is used to run form field recognition.

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

    A button added in version 8.2.0 which is used to switch the current state-handler to CreateTextStateHandler to create text form widget. The function is equivalent to <create-text-field-button>

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

    A button which is used to switch the current state-handler to CreateSignStateHandler to create signature form widget.

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

    A button which is used to switch the current state-handler to CreatePushButtonStateHandler to create push-button form widget.

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

    A button which is used to switch the current state-handler to CreateCheckBoxStateHandler to create checkbox form widget.

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

    A button which is used to switch the current state-handler to CreateRadioButtonStateHandler to create radio form widget.

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

    A button which is used to switch the current state-handler to CreateComboBoxStateHandler to create combobox form widget.

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

    A button which is used to switch the current state-handler to CreateListBoxStateHandler to create listbox form widget.

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

    A button which is used to switch the current state-handler to CreateImageStateHandler to create image form widget.

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

    A button which is used to switch the current state-handler to CreateDateStateHandler to create date form widget.

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

Added in version 8.2.0. It's used to show a dialog to create PDF page template. This component is defined in 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>

Added in version 8.2.0. It's used to edit static XFA form. This component is defined in 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>

Added in version 8.2.0. It's used to show the 'Calculation Order' dialog.

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

Added in version 8.2.0. It's used to add tooltip.

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

Added in version 8.2.0. It's used to reset all form fields to their default values.

<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> and <create-ink-sign-dialog>

These components are used to display all ink-signatures and create custom ink-signatures. They should be defined in the layout-template at the same time.

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

From version 8.2.0, <ink-sign-ribbon-dropdown> is used by default.

# <ink-sign-ribbon-dropdown>

Added in version 8.2.0. The function of this component is equivalent to <ink-sign-dropdown>.

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

This button is used to display the password protection dialog to encrypt current PDF document.

Usage

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

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

This button is used to remove security of the current PDF document.

Usage

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

# Redaction components

  1. <redaction:create-redactions-dropdown>

    A button to switch current state-handler to create-redaction-state

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

    Added in version 8.2.0, the function of this component is equivalent to <redaction:create-redactions-dropdown>

  3. <redaction:apply-redactions-button>

    A button to apply all redactions in PDF document.

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

    Added in version 8.2.0, the function of this component is equivalent to <redaction:apply-redactions-button>

  5. <redaction:redaction-search-button>

    A button to toggle search sidebar panel.

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

    Added in version 8.2.0, the function of this component is equivalent to <redaction:redaction-search-button>

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

    Added in version 8.6.0, A button which is used to switch the current state-handler to CreateRedactionTextAndImageStateHandler to mark text and image.

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

    Added in version 8.6.0, A button which is used to switch the current state-handler to CreateRedactionStateHandler to mark area.

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

    Added in version 8.6.0, A button which is used to mark page.

    <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>
  1. <bookmark-sidebar-panel>
  2. <commentlist-sidebar-panel>
  3. <thumbnail-sidebar-panel>
  4. <layer-sidebar-panel>
  5. <search-sidebar-panel>
  6. <attachment-sidebar-panel>

# <distance:ruler-container> and <distance:measurement-popup>

These two components show ruler and measurement information when creating distance annotation. The <viewer> component should be wrapped in <distance:ruler-container> with <slot> and <distance:measurement-popup> should be wrapped in a <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>

# Context menu components

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

If the contextmenu for the annotation cannot be found, and that annotation is not a markup, this will be used by default.

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

If the contextmenu for the annotation cannot be found, and that annotation is a markup, this will be used by default.

Original template:

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

Using

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

# <fileattachment-contextmenu>

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Note: The name of the contextmenu is used internally to obtain the menu components and cannot be changed!

From version 8.2.0, this component is removed and contextmenu-form-designer is used instead.

# <bookmark-contextmenu>

Original template:

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

# <thumbnail:thumbnail-contextmenu>

Original template:

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

This component is implemented in the thumbnail addon, which needs to be loaded before it can be used.

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

A floating component that appears when you select text in a PDF page.

# <annottext>

A floating component that appears when mouse over an annotation.

← @controller →