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