Foxit PDF SDK For Web - V9.2.1

# @retractable and @retractable-body

# Introduction

@retractable and @retractable-body are two custom directives that need to be used together to implement the retractable (floating) and fixed functionalities of the tab panel. These two directives can help you create tabs with retractable and fixed functionalities in your application, thus providing a better user experience.

# Usage

# Basic usage

To create tabs with retractable and fixed functionalities, please use the @retractable and @retractable-body directives in combination. Below is a basic usage example:

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

After using the @retractable and @retractable-body directives, the tab panel will have retractable and fixed functionalities, allowing users to click on tabs or buttons to expand or collapse the page content.

# Enable the @retractable functionality

Since the default layout template does not integrate with this directive, users need to take further action to enable the related functionality. Currently, users may encounter the following scenarios:

  1. User uses the default built-in layout
  2. User uses a custom layout

Below, we will explain the usage for these two scenarios.

# How to enable the functionality when using the default built-in layout

You can enable the functionality using 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
})

# How to enable the functionality when using a custom layout

In a custom layout, you just need to add the @retractable directive to the <gtab> component. The @retractable-body directive can be added to each tab panel or to the container of the tab panels, as long as all your tab panels are placed under the same container component. However, the first method is more cumbersome, and we do not recommend it. Below, we provide an example of using the @retractable-body directive in a container component:

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

# Example

Here is a complete example that demonstrates how to create a simple application with retractable tabs using the @retractable and @retractable-body directives. Please click the run button to execute.

# Note

  1. The @retractable directive adds a button component inside the tab panel, which is displayed at the bottom right corner of the tab panel. This is accomplished using absolute positioning (position: absolute). Thus, you need to make sure that the position CSS property value of the tab panel cannot be set to static.

  2. The purpose of the @retractable-body directive is to add the fv__ui-retractable-floating-bar to the component's className when the user collapses the tab panel. This class includes default styles such as position: absolute;left:0;right:0, which are intended to make the panel width equal to that of the parent node and not take up the container's height. In practical application scenarios, the panel may not display correctly due to issues such as the parent node not having a set width and positioning. Users should adjust these style values based on their specific application requirements.

← Introduction to addons →