Apryse WebViewer

Class: RibbonGroup

UI.Components. RibbonGroup

UI.Components.RibbonGroup

new RibbonGroup(properties)

Creates a new instance of RibbonGroup.
Parameters:
Name Type Description
properties ContainerProperties An object that contains the properties of the ribbon group.
Properties
Name Type Argument Description
items Array.<UI.Components.RibbonItem> The items in the ribbon group. Non-ribbon items will be ignored.
headerDirection 'column' | 'row' <optional>
 A string describing the direction of the header in which the ribbon will be placed.
placement 'top' | 'bottom' | 'left' | 'right' <optional>
 A string describing the placement of the header in which the ribbon will be placed.
Example
const ribbonGroup = new instance.UI.Components.RibbonGroup({
  dataElement: 'default-ribbon-group',
  grow: 2,
  justifyContent: 'start',
  title: 'Default Ribbon Group',
  type: 'ribbonGroup',
  items: [
  // these items would need to be defined in your code
    viewRibbonItem,
    annotateRibbonItem,
    shapesRibbomItem,
    insertRibbonItem,
    redactionRibbonItem,
    measureRibbonItem,
    editRibbonItem,
    contentEditRibbonItem,
    fillAndSignRibbonItem,
    formsRibbonItem,
  ]
});

Extends

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.
Inherited From:

setGrow(grow)

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

setItems(items)

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

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
Inherited From:

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.
Inherited From:
Example
groupedItems.setStyle({
      background: 'aliceblue',
      border: '8px dashed',
      padding: '8px 12px'
    });