# # inline-color-picker 组件

`inline-color-picker` 组件在界面上显示一个矩形框，用户点击矩形框后会显示一个拾色器窗口，用户可以在拾色器窗口中选择自己想要的颜色。

备注: `inline-color-picker` 当前仅在 "fv--comparison-select-pdf-file-dialog" 对话框中使用。

## # 代码示例

下面示例展示了 `inline-color-picker` 组件的基本用法:

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

    {
        "iframeOptions": {
            "style": "height: 300px"
        }
    }

通过接口设置当前显示的色值：

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

    {
        "iframeOptions": {
            "style": "height: 300px"
        }
    }

## # API

### # inline-color-picker 组件模板

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

### # 方法

方法 | 描述 | 版本
--- | --- | ---
`setValue(color: number|Color)` | 设置当前色值 | 8.5.0
`getValue(): Color` | 获取当前色值 | 8.5.0

### # 事件

名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
`change` | 用户选择颜色时触发 | `inlineColorPicker.on('change', (color) => {})` | 8.5.0