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

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

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