Apryse WebViewer

Class: GroupedItems

UI.Components. GroupedItems

UI.Components.GroupedItems

new GroupedItems(properties)

Creates a new instance of GroupedItems.
Parameters:
Name Type Description
properties ContainerProperties An object that contains the properties of the grouped items.
Properties
Name Type Argument Description
dataElement string <optional>
 The data element of the grouped item.
placement 'top' | 'bottom' | 'left' | 'right' <optional>
 A string that determines the placement of the header.
justifyContent 'start' | 'end' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' <optional>
 A string that determines the flex justify content value of the grouped items container.
grow number <optional>
 The flex grow value of the grouped items container.
gap number <optional>
 The gap between the items in the grouped items container.
position 'start' | 'center' | 'end' <optional>
 A string that determines the position of the grouped items container.
alwaysVisible boolean <optional>
 Whether the group should always be visible or not. Default is false. Alternatively, visibility can be toggled by changing the active grouped item using a Ribbon Item.
style Object <optional>
 An object that can set the CSS style of the grouped items.
items Array.<Object> <optional>
 The items within the grouped items container. The valid items are: UI.Components.ModularHeader, UI.Components.CustomButton, UI.Components.StatefulButton, UI.Components.GroupedItems, UI.Components.RibbonItem, UI.Components.ToggleElementButton, UI.Components.RibbonGroup, UI.Components.ToolButton, UI.Components.Zoom, UI.Components.Flyout, UI.Components.PageControls, UI.Components.PresetButton, UI.Components.ViewControls, UI.Components.TabPanel.
Example
const groupedLeftHeaderButtons = new instance.UI.Components.GroupedItems({
  dataElement: 'groupedLeftHeaderButtons',
  grow: 0,
  gap: 12,
  position: 'start',
  style: {},
  items: [
    // these items would need to be defined in your code
    leftHeaderButton1,
    leftHeaderButton2,
    leftHeaderButton3
  ],
  alwaysVisible: true,
  });

Members

alwaysVisible

Whether the group should always be visible or not. Default is false. Alternatively, visibility can be toggled by changing the active grouped item using a Ribbon Item.

dataElement

The data element of the grouped item.

gap

The gap between the items in the grouped items container.

grow

The flex grow value of the grouped items container.

items

The items within the grouped items container. The valid items are: UI.Components.ModularHeader, UI.Components.CustomButton, UI.Components.StatefulButton, UI.Components.GroupedItems, UI.Components.RibbonItem, UI.Components.ToggleElementButton, UI.Components.RibbonGroup, UI.Components.ToolButton, UI.Components.Zoom, UI.Components.Flyout, UI.Components.PageControls, UI.Components.PresetButton, UI.Components.ViewControls, UI.Components.TabPanel.

justifyContent

A string that determines the flex justify content value of the grouped items container.

placement

The data element of the grouped item.

position

A string that determines the position of the grouped items container.

style

An object that can set the CSS style of the grouped items.

Methods

setGap(gap)

Sets the gap between items in the GroupedItems
Parameters:
Name Type Description
gap number The gap in pixels between the items in the group.

setGrow(grow)

Sets the flex grow property of the GroupedItems
Parameters:
Name Type Description
grow number The flex grow value of the group

setItems(items)

Sets the items in the GroupedItems
Parameters:
Name Type Description
items Array.<Object> The items to set in the group.

setJustifyContent(justifyContent)

Sets the flex justifyContent property of the GroupedItems
Parameters:
Name Type Description
justifyContent 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' A string that determines the flex justify content value of the group

setStyle(style)

Sets the style of the GroupedItems (padding, border, background, etc.)
Parameters:
Name Type Description
style Object An object that can change the CSS style of the group.
Example
groupedItems.setStyle({
      background: 'aliceblue',
      border: '8px dashed',
      padding: '8px 12px'
    });