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

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