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
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.
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,
  });

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