# 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
# 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.
# Designate the retained components after shrinkage
# Designate the shrink-title
The More Options in the image below is the shrink title:
# 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 |