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
dataElement string <optional>
 A string representing the data element of the ribbon group.
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.
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 container.
grow number <optional>
 The flex grow value of the ribbon group.
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

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

dataElement

The data element of the grouped item.
Inherited From:

gap

The gap between the items in the grouped items container.
Inherited From:

grow

The flex grow value of the grouped items container.
Inherited From:

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

justifyContent

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

placement

The data element of the grouped item.
Inherited From:

position

A string that determines the position of the grouped items container.
Inherited From:

style

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

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