@retractable and @retractable-body

Introduction

@retractable and @retractable-body are custom directives used together to make toolbar tab panels collapsible (floating) and pinnable. They help build tab UIs that users can collapse or keep open.

Usage

Basic usage

Use both directives on tab headers and bodies:

<gtab name="home-tab" group="tabs" body="home-tab-body" @retractable></gtab>
<gtab name="edit-tab" group="tabs" body="edit-tab-body" @retractable></gtab>
<div name="home-tab-body" @retractable-body style="position: relative"></div>
<div name="edit-tab-body" @retractable-body style="position: relative"></div>

Users can click tabs or controls to expand or collapse panel content.

Enabling @retractable

The default layout template does not include these directives. Enable them based on your setup:

1. You use the built-in layout
2. You use a custom layout

The sections below cover both.

Enable with the built-in layout

Use fragment configuration:

var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
    getDefaultFragments: function () {
        return [{
            target: '@gtab', // Select all <gtab> components
            config: {
                attrs: {
                    '@retractable': ''
                }
            }
        }, {
            target: 'toolbar-tab-bodies', // Select the container of the tab panel


            config: {
                attrs: {
                    '@retractable-body': ''
                }
            }
        }];
    }
})
new PDFUI({
    // ...more options
    appearance: CustomAppearance
})

Enable with a custom layout

Add @retractable to each <gtab>. Add @retractable-body to the tab body container (all tab bodies under one parent), not to each body separately—the per-body approach is more work and not recommended.

var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
    getLayoutTemplate: function () {
        return `
            <webpdf @aria:circular-focus>
                <toolbar name="toolbar" class="fv__ui-toolbar-scrollable" @aria:role="navigation" @aria:label="aria:labels.toolbar.nav-title">
                    <div class="fv__ui-tab-nav" name="toolbar-tabs" @alt.menu=">::activated()" @aria:toolbar.tablist>
                        <gtab @retractable name="home-tab" group="toolbar-tab" body="fv--home-tab-paddle" text="toolbar.tabs.home.title" @aria:toolbar.tab active @portfolio.deactive></gtab>
                        <gtab @retractable name="comment-tab" group="toolbar-tab" body="fv--comment-tab-paddle" text="toolbar.tabs.comment.title" @aria:toolbar.tab @portfolio.unsupport></gtab>
                    </div>
                    <div class="fv__ui-toolbar-tab-bodies" name="toolbar-tab-bodies" @retractable-body>
                        <paddle exclude-devices="tablet" name="fv--home-tab-paddle" @portfolio.unsupport @aria:toolbar>
                            <group-list name="home-toolbar-group-list">
                                <group name="home-tab-group-hand" retain-count="3">
                                    <hand-ribbon-button></hand-ribbon-button>
                                    <selection-ribbon-dropdown></selection-ribbon-dropdown>
                                    <snapshot-ribbon-button @hide-on-sr></snapshot-ribbon-button>
                                </group>
                                <group name="home-tab-group-io" retain-count="1" shrink-title="toolbar.more.document.title">
                                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                                    <download-file-ribbon-button></download-file-ribbon-button>
                                    <print:print-ribbon-button></print:print-ribbon-button>
                                </group>
                                <!-- ... more components -->
                            </group-list>
                        </paddle>
                        <paddle exclude-devices="tablet" name="fv--comment-tab-paddle" @portfolio.unsupport @aria:toolbar visible="false" @lazy.idle>
                            <group-list name="comment-toolbar-group-list">
                                <group name="comment-tab-group-hand" retain-count="3">
                                    <hand-ribbon-button></hand-ribbon-button>
                                    <selection-ribbon-dropdown></selection-ribbon-dropdown>
                                    <zoom-ribbon-dropdown></zoom-ribbon-dropdown>
                                </group>
                                <group name="comment-tab-group-note" retain-count="3">
                                    <create-note-ribbon-button></create-note-ribbon-button>
                                    <create-attachment-ribbon-button></create-attachment-ribbon-button>
                                </group>
                                <!-- ... more components -->
                            </group-list>
                        </paddle>
                    </div>
                </toolbar>
                <!-- ... more components -->
            </webpdf>
        `;
    }
})
new PDFUI({
    / ...more options
    appearance: CustomAppearance
})

Examples

The example below shows @retractable and @retractable-body on a simple app. Click Run to try it.

<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }

    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
        getDefaultFragments: function () {
            debugger;
            return [{
                target: '@gtab', // Select all <gtab> components
                config: {
                    attrs: {
                        '@retractable': ''
                    }
                }
            }, {
                target: 'toolbar-tab-bodies', // Select the container of the tab panel

                config: {
                    attrs: {
                        '@retractable-body': ''
                    }
                }
            }];
        }
    });
    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>

{
  "iframeOptions": {
    "style": "height: 500px"
  }
}

Notes

1. @retractable inserts a button at the bottom-right of the tab panel using position: absolute. Ensure the panel’s position is not static.

2. @restractable-body adds fv__ui-retractable-floating-bar to the component class when the panel is collapsed. Default styles are position: absolute; left: 0; right: 0 so the bar matches the parent width without taking layout height. Adjust these styles if the parent has no width or positioning and the panel does not display correctly.