| FoxitPDFSDKforWeb v11.1.0 Archives Foxit PDF SDK for Web

Classes
widgets
UIExtension » components

A module that contains all UI widgets inherited from the `Component` class, all of which are pure UI components and do not contain any business logic. More...

## Classes
class | ButtonComponent
| Defines button component,for more details on usage please visit this example page: /examples/UIExtension/tutorials/widgets/button.html Example: <xbutton>i18n.key</xbutton> <xbutton text="i18n.key"></xbutton> <xbutton icon-class="icon-css-class-name">i18n.key</xbutton> . More...
class | ContextMenuComponent
| Defines contextmenu component. Example: <contextmenu> <contextmenu-item name="contextmenu-item-0">i18n.key0</contextmenu-item> <contextmenu-separator></contextmenu-separator> <contextmenu-item name="contextmenu-item-1">i18n.key1</contextmenu-item> </contextmenu> . More...
class | ContextMenuItemComponent
| Defines the <contextmenu-item> component. Example: <contextmenu> <contextmenu-item name="contextmenu-item-0" icon-class="fv__icon-toolbar-fullscreen" shortcut="Ctrl+P">i18n.key0</contextmenu-item> <contextmenu-item name="contextmenu-item-1">i18n.key1</contextmenu-item> </contextmenu> . More...
class | DropdownButtonComponent
| Defines <dropdown-button> component, Dropdown button must be an item in <dropdown>'s list, this component may act as a button or a file-selector, for more details please visit /examples/UIExtension/tutorials/widgets/dropdown.html More...
class | DropdownComponent
| Defines `<dropdown>` component. Dropdown is toggleable, contextual overlays for displaying lists of `<dropdown-button>`, `<dropdown-item>`, `<xbutton>`, `<file-selector>` or `<li>`. for more details please visit this example page: /examples/UIExtension/tutorials/widgets/dropdown.html More...
class | DropdownItemComponent
| Defines <dropdown-item> component, dropdown item must be an item in the dropdown list. This component can wrapping any other component even dropdown also. For more details please visit /examples/UIExtension/tutorials/widgets/dropdown.html More...
class | FileSelectorComponent
| Defines file selector component. It looks the same as xbutton, a system file selector will popup after user clicks, and the change event will be triggered and handle method of controller will be invoked with file object after select a file. Example: <file-selector accept=".pdf" icon-class="icon-css-class-name">i18n.key</file-selector> . More...
class | FormFieldComponent
| Defined a form field type component. More...
class | FormGroupComponent
| <form-group> component, it used to control the display of form itemsExamples: More...
class | GroupComponent
| Defines <group> component. When the browser width is adjusted to less than 600, this component will automatically shrink. For more details please visit this example page: /examples/UIExtension/tutorials/widgets/group.html More...
class | GroupListComponent
| Defines <group-list> component. Group list is a container of <group>. More...
class | GTabComponent
| Defines <gtab> component, GTab is a component used to switch serval views. Different from <tabs> component, <gtab> component's tab and tab-body are separated! This allows us to define tabs more flexibly! More...
class | InlineColorPickerComponent
| Defines an inline color picker component Example: <form-group label="Select Color"> <inline-color-picker></inline-color-picker> </form-group> . More...
class | LayerComponent
| Defines <layer> component. A layer component can be used to open a floating box above ather element and also can be used as a modal dialog with a optional backdrop. For more details please visit this example page: /examples/UIExtension/tutorials/widgets/layer.html More...
class | LayerHeaderComponent
| Defines layer-header component, usually used for the header of a dialog box. For more details on usage, please visit this example page: /examples/UIExtension/tutorials/widgets/layer.html More...
class | LayerToolbarComponent
| Defines <layer-toolbar> component. It should be used as the child of <layer> component. This component is usually used as a container of one-line buttons, and is often used as the bottom bar of a dialog box. For more details please visit this example page: /examples/UIExtension/tutorials/widgets/layer.html More...
class | LayerViewComponent
| Defines <layer-view> component. It should be used as the child of <layer> component. This component is usually used as a body container for dialog box. For more detail please visit this example page: /examples/UIExtension/tutorials/widgets/layer.html More...
class | NumberComponent
| Defines number component, which is a text input element that allows only numbers and has a limited range and step size. For more details on usage please visit this example page: /examples/UIExtension/tutorials/widgets/number.html More...
class | OptionGroupComponent
| OptionGroupItem multiple: multiple choice selected: default choice Example: <option-group multiple> <option-group-item selected>i18n.key</option-group-item> </option-group> . More...
class | PaddleComponent
| Defines paddle component, used to toggle content when content overflows to facilitate display of overflowing content. <div class="container" style="width: 768px"> <paddle> <div style="width: 1024px">content</div> </paddle> </div> . More...
class | SidebarComponent
| Defines sidebar panel component. Each tab of sidebar is called sidebar-panel, this is a container component with an icon and title. It must be the child of a sidebar component. For more details on usage please visit this page /examples/UIExtension/tutorials/widgets/sidebar.html More...
class | SlotComponent
| Defines slot component, inherits from ContainerComponent. Slot can accommodate multile child components, and inserting that into the specified position of the target component after mounted to DOM tree. A slot component needs to specify the slot name and target component name, or if the target component name is not specified, then parent component instead. Example: <webpdf> <some-component name="any-component-name"></some-component> <slot component="any-component-name" for="slot-name"> <i class="xxx"></i> </slot> <some-container-component> <slot for="slot-name"> <i class="xxx"></i> </slot> </some-container-component> </webpdf> . More...
class | TabItemComponent
| Defines tab component. Tab is one of the view of a `tabs` component which used to accommodate any child components. More...
class | TabsComponent
| Defines <tabs> component. Tabs is a component with a set of `tab`s used to switch different views. For more details on usage please visit this page /examples/UIExtension/tutorials/widgets/tabs.html More...
class | TextComponent
| Defines text component. This component will localize text content via I18Next and generates an text node insert into the DOM tree, You can update content of that text node via TextComponent.setText() API. It acts like data-i18n attribute, but that clears all children elements. For more details on usage please visit this example page: /examples/UIExtension/tutorials/widgets/text.html More...
class | ToolbarComponent
| Defines toolbar component. This is just an div with a css class name fv__ui-toolbar. Usually it's used to customize special styles of the component in the toolbar. More...
class | TooltipLayerComponent
| A tooltip like layer. Here is an example about usage on text-selection: /examples/UIExtension/customize-text-selection-tool/index.html More...
class | TreeComponent
| The class that defines the tree component The component is used via the following code snippet: More...
class | TreeNodeComponent
| Represents a component for a tree node in a tree structure. More...
interface | TreeNodeData
| Represents the data structure for a tree node. More...

## Detailed Description

A module that contains all UI widgets inherited from the `Component` class, all of which are pure UI components and do not contain any business logic.

@2026 Foxit Software Incorporated. All rights reserved.