# Tab 组件

# 示例代码

# 基础 tab 示例

# 嵌套 tab

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

# 前置图标 (图标和文字在相同水平线，左右摆放)

# 文字上方的图标

# 可关闭的 tab

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

<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

# 使用 JavaScript 动态插入一个 tab

# API

# Tab 组件模板

模板示例：

<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
body	tab 正文名称	`string`	--	7.4.0
closable	定义 tab 是否是可关闭的	`boolean`	`false`	7.4.0
destroy-on-close	是否在关闭 tab 后销毁该 tab。一旦 tab 被销毁，标签体组件也会随着销毁。	`boolean`	`false`	7.4.0
class="stacked"	定义 tab 的图标和文本在两行中显示，否则在一行中显示。	--	--	7.4.0

# Tab 对象属性

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

# 方法

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

← Dropdown 组件 Sidebar 组件 →