# # Tab component

## # Code examples

### # Basic tab example

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

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

### # Leading icon

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

### # Top icon

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

### # Closable tabs

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

### # Tabs with dropdown

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

### # Insert a tab using fragment-configuration

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

### # Dynamically insert a tab using JavaScript

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

Template example:

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

The tab component template properties:

Property | Description | Type | Default Value | Version
--- | --- | --- | --- | ---
group | Only one tab can be activated in a group,similar to the radio name | `string` | -- | 7.4.0
body | Tab body's name | `string` | -- | 7.4.0
closable | Define if the tab is closable | `boolean` | `false` | 7.4.0
destroy-on-close | Whether to destroy tab after the tab is closed. Once the tab is destroyed, the body component will be destructed also. | `boolean` | `false` | 7.4.0
class="stacked" | Define the tab's 'icon and text' to be displayed in two lines, otherwise in one line. | -- | -- | 7.4.0

### # Tab object properties

Property | Description | Type
--- | --- | ---
disabled | Disabled status | `boolean`
isVisible | Visibility status | `boolean`
isActive | Activity status | `boolean`
isClosed | Closes | `boolean`

### # Methods

Method | Description | Version
--- | --- | ---
disable(): void | Disable a tab | 7.0.0
enable(): void | Make a disabled tab enabled | 7.0.0
show(): void | Make a hidden tab shown | 7.0.0
hide(): void | Hide a tab | 7.0.0
active(): void | Activate a tab | 7.0.0
deactive(): void | Make a tab inactive | 7.0.0
destroy(): void | Destroy a tab | 7.0.0
close(): void | Close a tab. The closed tab will be hidden, and the adjacent tab will be activated | 7.4.0
open(): void | Make a closed tab shown | 7.4.0

## # Events

Name | Description | Sample | Version
--- | --- | --- | ---
active | Triggered when a tab is activated | `gtab.on('active', () => {})` | 7.0.0
deactive | Triggered when a tab is deactivated | `gtab.on('deactive', () => {})` | 7.0.0
close | Triggered when a tab is closed | `gtab.on('close', () => {})` | 7.4.0
open | Triggered when a tab is opened | `gtab.on('open', () => {})` | 7.4.0