Namespace: Components

UI. Components

A namespace which contains APIs Modular UI components.

Example

webViewerInstance.UI.Components.someComponent
webViewerInstance.UI.Components.someAPI()

Classes

CustomButton
Flyout
GroupedItems
Item
MainMenu
ModularHeader
PageControls
Panel
PresetButton
RibbonGroup
RibbonItem
StatefulButton
TabPanel
ToggleElementButton
ToolButton
ViewControls
Zoom

Type Definitions


ContainerProperties

Type:
  • Object
Properties:
Name Type Argument Description
label string <optional>
The label of the container.
dataElement string <optional>
The data element of the container.
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 container.
grow number <optional>
The flex grow value of the container.
gap number <optional>
The gap between the items in the container.
position 'start' | 'center' | 'end' <optional>
A string that determines the position of the container.
items Array.<Object> <optional>
The items or other containers within the container.
style Object <optional>
An object that can set the CSS style of the container.

FlyoutItem

Represents an item in a flyout with optional submenu.
Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
A unique string that identifies the flyout item.
label string <optional>
The label of the flyout item.
onClick function <optional>
A function that is called when the item is clicked.
icon string <optional>
Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
children Array.<FlyoutItem> <optional>
An array of objects that represents the items in a sub-menu, has the same properties as the parent items property and can be infinitely nested.

ItemProperties

Item options
Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
The data element of the item.
title string <optional>
The tooltip of the item.
disabled boolean <optional>
Whether the item is disabled or not.
type string <optional>
The type of the item.

ItemType

Description of allowable item types.
Type:
  • 'modularHeader' | 'customButton' | 'statefulButton' | 'groupedItems' | 'ribbonItem' | 'divider' | 'toggleButton' | 'ribbonGroup' | 'toolButton' | 'zoom' | 'flyout' | 'pageControls' | 'presetButton' | 'viewControls' | 'menu' | 'tabPanel'

TabPanelItemProperties

Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
Unique dataElement name for the panel.
icon string <optional>
Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
label string <optional>
The label to be displayed for the panel in the Tab Panel.
render function | string The function that renders the panel or the name of the preset panel.

TabPanelProperties

Type:
  • Object
Properties:
Name Type Argument Description
dataElement string Unique dataElement name for the tab panel.
panelsList Array.<TabPanelItemProperties> The list of panels to be displayed in the tab panel.
location string <optional>
The location of the panel. It can be either 'left' or 'right'

Namespace: Components

UI. Components

A namespace which contains APIs Modular UI components.

Example

webViewerInstance.UI.Components.someComponent
webViewerInstance.UI.Components.someAPI()

Classes

CustomButton
Flyout
GroupedItems
Item
MainMenu
ModularHeader
PageControls
Panel
PresetButton
RibbonGroup
RibbonItem
StatefulButton
TabPanel
ToggleElementButton
ToolButton
ViewControls
Zoom

Type Definitions


ContainerProperties

Type:
  • Object
Properties:
Name Type Argument Description
label string <optional>
The label of the container.
dataElement string <optional>
The data element of the container.
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 container.
grow number <optional>
The flex grow value of the container.
gap number <optional>
The gap between the items in the container.
position 'start' | 'center' | 'end' <optional>
A string that determines the position of the container.
items Array.<Object> <optional>
The items or other containers within the container.
style Object <optional>
An object that can set the CSS style of the container.

FlyoutItem

Represents an item in a flyout with optional submenu.
Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
A unique string that identifies the flyout item.
label string <optional>
The label of the flyout item.
onClick function <optional>
A function that is called when the item is clicked.
icon string <optional>
Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
children Array.<FlyoutItem> <optional>
An array of objects that represents the items in a sub-menu, has the same properties as the parent items property and can be infinitely nested.

ItemProperties

Item options
Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
The data element of the item.
title string <optional>
The tooltip of the item.
disabled boolean <optional>
Whether the item is disabled or not.
type string <optional>
The type of the item.

ItemType

Description of allowable item types.
Type:
  • 'modularHeader' | 'customButton' | 'statefulButton' | 'groupedItems' | 'ribbonItem' | 'divider' | 'toggleButton' | 'ribbonGroup' | 'toolButton' | 'zoom' | 'flyout' | 'pageControls' | 'presetButton' | 'viewControls' | 'menu' | 'tabPanel'

TabPanelItemProperties

Type:
  • Object
Properties:
Name Type Argument Description
dataElement string <optional>
Unique dataElement name for the panel.
icon string <optional>
Path to an image or base64 data. Can also be the filename of a .svg from the WebViewer icons folder found here: assets/icons/ (i.e. `icon-save` to use `icon-save.svg`).
label string <optional>
The label to be displayed for the panel in the Tab Panel.
render function | string The function that renders the panel or the name of the preset panel.

TabPanelProperties

Type:
  • Object
Properties:
Name Type Argument Description
dataElement string Unique dataElement name for the tab panel.
panelsList Array.<TabPanelItemProperties> The list of panels to be displayed in the tab panel.
location string <optional>
The location of the panel. It can be either 'left' or 'right'