| FoxitPDFSDKforWeb v11.1.0 Archives Foxit PDF SDK for Web

Public Attributes | List of all members
FragmentComponentOptions Interface Reference
UIExtension » components » options

component options in fragment config property. More...

Inheritance diagram for FragmentComponentOptions:

## Public Attributes
object | attrs
| This is the key-value pair object used to extend to component attributes, which is equivalent to declaring the attributes on the tag in the layout-template. More...
string | target
| target component name in template. This property is required when the action value equals to FRAGMENT_ACTION.EXT Examples: More...
Public Attributes inherited from ComponentOptions
boolean | active = false
| Initial activation state. More...
boolean | canBeDisabled =false
| Wheher or not this component can be disabled, if true, disable method will be not working. attribute name in layout-template: can-be-disabled. More...
string | cls = ''
| Specific a class attribute for the root element of a component. In the fragment config, it is writtern like this: new PDFUI({ fragments:[{ target: 'your component name', config: { cls: 'your-custom-css-class' } },...] }) and in layout-template, it's writtern like the this: <component-type class="your-custom-css-class"> </component-type> . More...
boolean | disabled =false
| initial disable state More...
boolean | visible = true
| Initial visibility state, if false, this component will be not displaying on screen after mounted. More...

## Detailed Description

component options in fragment config property.

Since
  7.0.0

## Member Data Documentation

## ◆ attrs

object FragmentComponentOptions::attrs

This is the key-value pair object used to extend to component attributes, which is equivalent to declaring the attributes on the tag in the layout-template.

An example to add tooltip title on open-file-dropdown component:

{
target: 'open-file-button-list',
config: {
attrs: {
'@tooltip': '',
'tooltip-title': 'title of the tooltip'
}
}
}

## ◆ target

string FragmentComponentOptions::target

target component name in template. This property is required when the action value equals to FRAGMENT_ACTION.EXT
Examples:

1. ext action config:
   {
   target: 'exiting-component-name-in-fragments', // target property of UIFragmentOptions, is not same as the target of FragmentComponentOptions
   action: UIExtension.UIConsts.FRAGMENT_ACTION.EXT,
   config: {
   // target: '', // target value in this fragment will be ignored
   'some-property': 'value' // override some-property of the component options which names 'exiting-component-name-in-fragments'
   }
   }
2. multiple configs:
   {
   target: 'exiting-component-name-in-fragments'
   action: UIExtension.UIConsts.FRAGMENT_ACTION.APPEND,
   template: `
   <div class="custom-button-list">
   <xbutton name="button0"></xbutton>
   <xbutton name="button1" icon-class="icon-css-class"></xbutton>
   </div>
   `,
   config: [{
   target: 'button0',
   text: 'button0'
   }, {
   target: 'button1',
   iconCls: 'other-icon-css-class' // override icon-class attribute of button1
   }]
   }
   Since
     7.0.0

@2026 Foxit Software Incorporated. All rights reserved.