FragmentComponentOptions Interface Reference

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