# # Tab 组件

## # 示例代码

### # 基础 tab 示例

    <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>
        <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>
        <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>
        <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>
        <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>
        <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>
    <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>
    <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 组件模板

模板示例：

    <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