Apryse WebViewer

Class: ModularHeader

UI.Components. ModularHeader

UI.Components.ModularHeader

new ModularHeader(properties)

Creates a new instance of ModularHeader.
Parameters:
Name Type Description
properties ContainerProperties An object that contains the properties of the header
Example
const defaultTopHeader = new instance.UI.Components.ModularHeader({
  dataElement: 'default-top-header',
  placement: 'top',
  grow: 0,
  gap: 12,
  position: 'start',
  'float': false,
  stroke: true,
  dimension: {
    paddingTop: 8,
    paddingBottom: 8,
    borderWidth: 1
  },
  style: {},
  items: [
    // these items would need to be defined in your code
    groupedLeftHeaderButtons,
    ribbonGroup,
  ]
  });

Methods

getGroupedItems()

Returns the grouped items contained in the ModularHeader
Returns:
The items of the ModularHeader
Type
Array.<UI.Components.GroupedItems>

getItems( [type])

Returns the items contained in the ModularHeader.
Parameters:
Name Type Argument Description
type ItemType <optional>
 Optional type of the items to be returned.
Returns:
The items of the ModularHeader.
Type
Array.<Object>

setGap(gap)

Sets the gap between items in the ModularHeader
Parameters:
Name Type Description
gap number The gap between items in the header

setItems(items)

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

setJustifyContent(justifyContent)

Changes the flex justifyContent property of the ModularHeader
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 header

setStyle(style)

Sets the style of the ModularHeader (padding, border, background, etc.)
Parameters:
Name Type Description
style Object An object that can change the CSS style of the ModularHeader