福昕开发者文档中心

Group 组件 ​

Group 组件通常用于在工具栏上通过垂直线来分离组件。每个 group 代表一个类别，在小屏幕上运行时可以收缩。

Group 组件收缩，被收缩的组件需要通过点击 ... 按钮显示到下拉列表中:

Paddle Button

代码示例 ​

入门示例 ​

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list>
                <group name="home-tab-group-hand">
                    <hand-button></hand-button>
                    <selection-button>Selection</selection-button>
                    <snapshot-button></snapshot-button>
                </group>
                <group name="home-tab-group-io">
                    <open-file-dropdown></open-file-dropdown>
                    <download-file-button></download-file-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>

指定 shrink-size ​

在下面的示例中，group-list 将 shrink-size 定义为762像素，这意味着当根组件 <webpdf> 的宽度小于 762 像素时，所有没有 shrink-size 标记的 child group 都将会收缩。当根组件的宽度小于 600 像素时，带有 shrink-size="600" 标记的 child group 将会被缩短。

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="762">
                <group name="home-tab-group-hand">
                    <hand-button></hand-button>
                    <selection-button>Selection</selection-button>
                    <snapshot-button></snapshot-button>
                </group>
                <group name="home-tab-group-io" shrink-size="600">
                    <open-file-dropdown></open-file-dropdown>
                    <download-file-button></download-file-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>

指定收缩后保留的组件 ​

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="762">
                <!-- retain two components after shrinking -->
                Specify
                <group name="home-tab-group-hand" retain-count="2">
                    <hand-button></hand-button>
                    <selection-button>Selection</selection-button>
                    <snapshot-button></snapshot-button>
                </group>
                <!-- If the retain-count value is equal to the components count, no shrinkag will occur -->
                <group name="home-tab-group-io" retain-count="2">
                    <open-file-dropdown></open-file-dropdown>
                    <download-file-button></download-file-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>

指定 shrink-title ​

以下图片中的 More Options 就是收缩后的标题：

shrink_title.jpg

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="762">
                <group name="home-tab-group-hand" retain-count="2" shrink-title="options">
                    <hand-button></hand-button>
                    <selection-button>Selection</selection-button>
                    <snapshot-button></snapshot-button>
                </group>
                <group name="home-tab-group-io" shrink-title="options">
                    <open-file-dropdown></open-file-dropdown>
                    <download-file-button></download-file-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>

API ​

Group 组件模板 ​

模板示例：

html

<group-list shrink-size="762">
    <group retain-count="2" shrink-title="options"></group>
    <group retain-count="1" shrink-title="options"></group>
</group-list>

group-list 模板属性:

属性描述类型默认值版本
shrink-size指定像素宽度。当 <webpdf> 的宽度小于指定的宽度时触发。number10247.0.0

group 模板属性：

属性描述类型默认值版本
retain-count定义收缩后保留的部件number17.0.0
shrink-title定义收缩后显示在下拉列表顶部的标题string''7.0.0
shrink-size指定像素宽度值。当 <webpdf> 的宽度小于该值时触发。一旦指定，该 group 将忽略父级 group-list 中定义的值。number默认与父级组件 group-list 中的值相同7.0.0

方法 ​

<group> 组件方法:

方法描述版本
setRetainCount(count: number): void设置不被收缩到列表的组件数量。7.0.0
setShrinkTitle(title: string): void设置收缩后显示在下拉列表顶部的标题。7.0.0

事件 ​

<group> 组件事件:

名称描述示例版本
shrink收缩或者扩展时触发group.on('shink', (isShrinked) => void)7.4.0

<group-list> 组件事件:

名称描述示例版本
shrink收缩或者扩展时触发groupList.on('shink', (groupComponent, isShrinked) => void)7.4.0