# # Group component

The Group component is commonly used on the Toolbar to separate the components with a vertical line. Each group represents a category, and can be set to shrink when running in a small screen.

Group shrank and hid tools under the dots:

## # Code example

### # Getting started

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar>
                    <group-list>
                        <group name="home-tab-group-hand">
                            <hand-button></hand-button>
                            <selection-button>Selection</selection-button>
                            <snapshot-button></snapshot-button>
                        </group>
                        <group name="home-tab-group-io">
                            <open-file-dropdown></open-file-dropdown>
                            <download-file-button></download-file-button>
                        </group>
                    </group-list>
                </toolbar>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
    </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>

### # Designate the shrink-size

In the following example, the `group-list` defines `shrink-size` as 762 pixels, which means all child group with no `shrink-size` marker will contract when the width of the root component `<webpdf>` is smaller than 762 pixels. The child group with `shrink-size="600"` marker will shorten when the root component's width is less than 600 pixels.

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar>
                    <group-list shrink-size="762">
                        <group name="home-tab-group-hand">
                            <hand-button></hand-button>
                            <selection-button>Selection</selection-button>
                            <snapshot-button></snapshot-button>
                        </group>
                        <group name="home-tab-group-io" shrink-size="600">
                            <open-file-dropdown></open-file-dropdown>
                            <download-file-button></download-file-button>
                        </group>
                    </group-list>
                </toolbar>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
    </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>

### # Designate the retained components after shrinkage

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar>
                    <group-list shrink-size="762">
                        <!-- retain two components after shrinking -->
                        Specify
                        <group name="home-tab-group-hand" retain-count="2">
                            <hand-button></hand-button>
                            <selection-button>Selection</selection-button>
                            <snapshot-button></snapshot-button>
                        </group>
                        <!-- If the retain-count value is equal to the components count, no shrinkag will occur -->
                        <group name="home-tab-group-io" retain-count="2">
                            <open-file-dropdown></open-file-dropdown>
                            <download-file-button></download-file-button>
                        </group>
                    </group-list>
                </toolbar>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
    </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>

### # Designate the shrink-title

The `More Options` in the image below is the shrink title:

    <html>
        <template id="layout-template">
            <webpdf>
                <toolbar>
                    <group-list shrink-size="762">
                        <group name="home-tab-group-hand" retain-count="2" shrink-title="options">
                            <hand-button></hand-button>
                            <selection-button>Selection</selection-button>
                            <snapshot-button></snapshot-button>
                        </group>
                        <group name="home-tab-group-io" shrink-title="options">
                            <open-file-dropdown></open-file-dropdown>
                            <download-file-button></download-file-button>
                        </group>
                    </group-list>
                </toolbar>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
    </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>

## # API

### # Group component template

Template example:

    <group-list shrink-size="762">
        <group retain-count="2" shrink-title="options"></group>
        <group retain-count="1" shrink-title="options"></group>
    </group-list>

The `group-list` template properties:

Property | Description | Type | Default Value | Version
--- | --- | --- | --- | ---
shrink-size | Specify a pixel width. Triggered when the `<webpdf>` width is less than the specified width | `number` | `1024` | 7.0.0

The `group` template properties:

Property | Description | Type | Default Value | Version
--- | --- | --- | --- | ---
retain-count | Define the retained components after shrinkage | `number` | `1` | 7.0.0
shrink-title | Define the title which shows on the top of the drop-down list after shrinkage | `string` | `''` | 7.0.0
shrink-size | Specify a pixel width value. Triggered when the `<webpdf>` width is less than this value. Once specified, this group will ignore the value defined in the parent group-list | `number` | the same value in the parent component `group-list` | 7.0.0

### # Methods

The `<group>` component methods:

Method | Description | Version
--- | --- | ---
`setRetainCount(count: number): void` | Set the retained count after shrinkage | 7.0.0
`setShrinkTitle(title: string): void` | Set the title which shows on the top of the drop-down list after shrinkage | 7.0.0

## # Events

The `<group>` component events:

Name | Description | Example | Version
--- | --- | --- | ---
`shrink` | Triggered on shrink or expand | `group.on('shink', (isShrinked) => void)` | 7.4.0

The `<group-list>` component events:

Name | Description | Example | Version
--- | --- | --- | ---
`shrink` | Triggered on shrink or expand | `groupList.on('shink', (groupComponent, isShrinked) => void)` | 7.4.0