# inline-color-picker 组件
inline-color-picker 组件在界面上显示一个矩形框，用户点击矩形框后会显示一个拾色器窗口，用户可以在拾色器窗口中选择自己想要的颜色。
# 代码示例
下面示例展示了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 |