福昕开发者文档中心

Tab 组件 ​

示例代码 ​

基础 tab 示例 ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <div>
                    <div class="tabs">
                        <gtab group="top-toolbar-tab" body="home-tab" active>home</gtab>
                        <gtab group="top-toolbar-tab" body="comment-tab">comment</gtab>
                        <gtab group="top-toolbar-tab" body="edit-tab">edit</gtab>
                    </div>
                    <div class="tab-bodies">
                        <div name="home-tab">
                            Home tab
                        </div>
                        <div name="comment-tab">
                            Comment tab
                        </div>
                        <div name="edit-tab">
                            Edit tab
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<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>

嵌套 tab ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <div>
                    <div class="tabs">
                        <gtab group="top-toolbar-tab" body="tab1" active>Tab One</gtab>
                        <gtab group="top-toolbar-tab" body="tab2">Tab Two</gtab>
                        <gtab group="top-toolbar-tab" body="tab3">Tab Three</gtab>
                    </div>
                    <div class="tab-bodies">
                        <div name="tab1">
                            <div class="tabs">
                                <gtab group="nested-tab1" body="nested-tab1-1" active>Nested Tab One</gtab>
                                <gtab group="nested-tab1" body="nested-tab1-2">Nested Tab Two</gtab>
                            </div>
                            <div name="nested-tab1-1">Nested Tab 1-1</div>
                            <div name="nested-tab1-2">Nested Tab 1-2</div>
                        </div>
                        <div name="tab2">
                            Tab Two
                        </div>
                        <div name="tab3">
                            <div class="tabs">
                                <gtab group="nested-tab3" body="nested-tab3-1">Nested Tab3 One</gtab>
                                <gtab group="nested-tab3" body="nested-tab3-2" active>Nested Tab3 Two</gtab>
                                <gtab group="nested-tab3" body="nested-tab3-3">Nested Tab3 Two</gtab>
                            </div>
                            <div name="nested-tab3-1">Nested Tab 3-1</div>
                            <div name="nested-tab3-2">Nested Tab 3-2</div>
                            <div name="nested-tab3-3">Nested Tab 3-3</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<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>
            <div>
                <div>
                    <div class="tabs">
                        <gtab group="top-toolbar-tab" body="comment-tab" active icon-class="fv__icon-sidebar-comment-list">Comment</gtab>
                        <gtab group="top-toolbar-tab" body="help-tab" active icon-class="fv__icon-dialog-level-question">Help</gtab>
                        <gtab group="top-toolbar-tab" body="settings-tab" icon-class="fv__icon-comment-item-menu-settings">Settings</gtab>
                    </div>
                    <div class="tab-bodies">
                        <div name="comment-tab">
                            Comment tab
                        </div>
                        <div name="help-tab">
                            Help tab
                        </div>
                        <div name="settings-tab">
                            Settings tab
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<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>
            <div>
                <div>
                    <div class="tabs">
                        <gtab class="stacked" group="top-toolbar-tab" body="comment-tab" active icon-class="fv__icon-sidebar-comment-list">Comment</gtab>
                        <gtab class="stacked" group="top-toolbar-tab" body="help-tab" active icon-class="fv__icon-dialog-level-question">Help</gtab>
                        <gtab class="stacked" group="top-toolbar-tab" body="settings-tab" icon-class="fv__icon-comment-item-menu-settings">Settings</gtab>
                    </div>
                    <div class="tab-bodies">
                        <div name="comment-tab">
                            Comment tab
                        </div>
                        <div name="help-tab">
                            Help tab
                        </div>
                        <div name="settings-tab">
                            Settings tab
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<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>

可关闭的 tab ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <div>
                    <div class="tabs">
                        <!-- Comment tab will be destroy after closed -->
                        <gtab class="stacked" group="top-toolbar-tab" body="comment-tab" icon-class="fv__icon-sidebar-comment-list" closable destroy-on-close>Comment</gtab>
                        <gtab class="stacked" group="top-toolbar-tab" body="help-tab" active icon-class="fv__icon-dialog-level-question">Help</gtab>
                        <gtab @controller="custom:SettingsTabController" name="settings-tab-ctrl" class="stacked" group="top-toolbar-tab" body="settings-tab" icon-class="fv__icon-comment-item-menu-settings" closable>Settings</gtab>
                        <xbutton visible="false" name="open-settings-tab-btn" class="open-settings-tab-btn" @controller="custom:ReopenTabController" icon-class="fv__icon-toolbar-add-sign" @tooltip tooltip-title="Reopen settings tab"></xbutton>
                    </div>
                    <div class="tab-bodies">
                        <div name="comment-tab">
                            Comment tab(closable,and will be destroyed after closing)
                        </div>
                        <div name="help-tab">
                            Help tab (unclosable)
                        </div>
                        <div name="settings-tab">
                            Settings tab (closable)
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .tabs {
        display: flex;
        align-items: center;
    }
    .open-settings-tab-btn {
        display: inline-flex;
        width: 32px;
        height: 32px;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom',[])
    .controller('ReopenTabController', {
        handle: function() {
            this.getComponentByName('settings-tab-ctrl').open();
        }
    })
    .controller('SettingsTabController', {
        mounted: function() {
            this.component.on('close', () => {
                this.getComponentByName('open-settings-tab-btn').show();
            });
            this.component.on('open', () => {
                this.getComponentByName('open-settings-tab-btn').hide();
            });
        }
    });
    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>

带 dropdown 的 tab ​

html
<html>
    <template id="layout-template">
        <webpdf>
            <div>
                <div>
                    <div class="tabs">
                        <gtab group="top-toolbar-tab" body="comment-tab" icon-class="fv__icon-sidebar-comment-list">Comment</gtab>
                        <dropdown>
                            <li>
                                <gtab group="top-toolbar-tab" body="help-tab" active icon-class="fv__icon-dialog-level-question">Help</gtab>
                            </li>
                            <li>
                                <gtab name="settings-tab-ctrl"  group="top-toolbar-tab" body="settings-tab" icon-class="fv__icon-comment-item-menu-settings">Settings</gtab>
                            </li>
                        </dropdown>
                    </div>
                    <div class="tab-bodies">
                        <div name="comment-tab">
                            Comment tab(closable and will be destroy after closed)
                        </div>
                        <div name="help-tab">
                            Help tab (unclosable)
                        </div>
                        <div name="settings-tab">
                            Settings tab (closable)
                        </div>
                    </div>
                </div>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
        </webpdf>
    </template>
</html>
<style>
    .tabs {
        display: flex;
        align-items: center;
    }
</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>

使用 fragment-configuration 输入一个 tab ​

html
<html>
</html>
<style>
    .tabs {
        display: flex;
        align-items: center;
    }
</style>
<script>
    var FRAGMENT_ACTION = UIExtension.UIConsts.FRAGMENT_ACTION;
    var CustomAppearance = UIExtension.appearances.RibbonAppearance.extend({
        getDefaultFragments: function() {
            return [{
                target: 'toolbar-tabs',
                action: FRAGMENT_ACTION.APPEND,
                template: '<gtab name="new-tab" group="toolbar-tab" body="new-tab-body">Tab inserted via fragment-configuration</gtab>'
            }, {
                target: 'toolbar-tab-bodies',
                action: FRAGMENT_ACTION.APPEND,
                template: '<div name="new-tab-body" style="line-height:1"><text>New tab body</text></div>'
            }];
        }
    });
    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>

使用 JavaScript 动态插入一个 tab ​

html
<html>
</html>
<style>
    .tabs {
        display: flex;
        align-items: center;
    }
</style>
<script>
    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
            viewerOptions: {
                libPath: libPath,
                jr: {
                    licenseSN: licenseSN,
                    licenseKey: licenseKey
                }
            },
            renderTo: document.body,
            appearance: UIExtension.appearances.RibbonAppearance,
            addons: []
    });
    pdfui.getRootComponent().then(root => {
        // the component name can be found in 'examples/UIExtension/layout-templates/built-in-pc-layout-template.tpl'
        var tabs = root.getComponentByName('toolbar-tabs');
        var tabBodies = root.getComponentByName('toolbar-tab-bodies');
        // insert a div named in 'new-tab-body'
        tabBodies.append('<div name="new-tab-body" style="line-height:1"><text>New tab body</text></div>');
        // insert a tab into 'toolbar-tabs' and specifies the tab body name as 'new-tab-body'
        tabs.append('<gtab name="new-tab" body="new-tab-body" group="toolbar-tab">Tab inserted via JS</gtab>');
        // activate new tab
        var newTab = tabs.getComponentByName('new-tab');
        newTab.active();
    })
</script>

API ​

Tab 组件模板 ​

模板示例：

html

<div class="tabs">
    <gtab group="mytabs" body="tab1" class="stacked" icon-class="fv__icon-comment-item-menu-settings" active>Tab Text
        1
    </gtab>
    <gtab group="mytabs" body="tab2" class="stacked" closable destroy-on-close>Tab Text 2
        <gtab>
</div>
<div class="tab-bodies">
    <div name="tab1">Tab One</div>
    <div name="tab2">Tab Two</div>
</div>

tab 组件模板属性：

属性描述类型默认值版本
group用于按钮分组，具有相同 group 值的标签属于同一组，同组标签一次只能激活一个。string--7.4.0
bodytab 正文名称string--7.4.0
closable定义 tab 是否是可关闭的booleanfalse7.4.0
destroy-on-close是否在关闭 tab 后销毁该 tab。一旦 tab 被销毁，标签体组件也会随着销毁。booleanfalse7.4.0
class="stacked"定义 tab 的图标和文本在两行中显示，否则在一行中显示。----7.4.0

Tab 对象属性 ​

属性描述类型
disabled禁用状态boolean
isVisible可见状态boolean
isActive活动状态boolean
isClosed关闭boolean

方法 ​

方法描述Version
disable(): void禁用 tab7.0.0
enable(): void启用一个被禁用的 tab7.0.0
show(): void显示一个被隐藏的 tab7.0.0
hide(): void隐藏一个 tab7.0.0
active(): void激活一个 tab7.0.0
deactive(): void使 tab 处于非活动状态7.0.0
destroy(): void销毁一个 tab7.0.0
close(): void关闭一个 tab。关闭的 tab 将会被隐藏，其相邻的 tab 将被激活7.4.0
open(): void显示已关闭的 tab7.4.0

事件 ​

名称描述示例版本
active激活 tab 时触发gtab.on('active', () => {})7.0.0
deactive停用 tab 时触发gtab.on('deactive', () => {})7.0.0
close关闭 tab 时触发gtab.on('close', () => {})7.4.0
open打开 tab 时触发gtab.on('open', () => {})7.4.0