Foxit Developer

inline-color-picker component ​

The inline-color-picker shows a color swatch on the UI. Clicking it opens a color picker. Today it is used in the fv--comparison-select-pdf-file-dialog dialog.

Code example ​

Basic usage:

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="0">
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                    <form-group label="Select color">
                        <inline-color-picker></inline-color-picker>
                    </form-group>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>

</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

Set the displayed color via the API:

html
<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="0">
                <group name="home-tab-group-hand" @var.grp="$component">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                    <form-group label="Select color">
                        <inline-color-picker @init="grp.colorPicker=$component"></inline-color-picker>
                    </form-group>
                    <ribbon-button @on.click="grp.colorPicker.setValue(Math.floor(Math.random() * 0xFFFFFF))"
                                   text="设置随机颜色"></ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>

</style>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        }
    });
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

API ​

inline-color-picker template ​

html
<inline-color-picker></inline-color-picker>

Methods ​

MethodDescriptionVersion
`setValue(color: numberColor)`Set the current color
getValue(): ColorGet the current color8.5.0

Events ​

NameDescriptionExampleVersion
changeFired when the user picks a colorinlineColorPicker.on('change', (color) => {})8.5.0