# UI Fragments

Fragments are a set of UI snippets, which can be used to insert,delete, or modify the components in UI template. It is suitable to facilitate a small amount of UI customization based on built-in templates.

If you need a lot of custom layout and device adaptation, please refer to the methods described in Appearance and layout template.

# simple example

The following code will use fragments configuration to remove the comment-tab component from the mobile and desktop/tablet layouts. Click run to run the example, and you can use the device mode of Chrome DevTool to simulate the running effect of mobile/tablet.

# The description of the Fragment configuration parameters

  • target: The name of the control, and each name is unique.
  • action: Indicates the action mode of the fragment snippets. The default action mode is UIExtension.UIConsts.FRAGMENT_ACTION.EXT. The specifics are as follows:
    • UIExtension.UIConsts.FRAGMENT_ACTION.EXT: Extend the target control.
    • UIExtension.UIConsts.FRAGMENT_ACTION.BEFORE: Insert a new control before the target control.
    • UIExtension.UIConsts.FRAGMENT_ACTION.AFTER: Insert a new control after the target control.
    • UIExtension.UIConsts.FRAGMENT_ACTION.APPEND: Insert a new control into the target control (the target control must be a container).
    • UIExtension.UIConsts.FRAGMENT_ACTION.FILL: Empty the child space of the target control and fill with a new control. Make sure that the target control must be a container.
    • UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE: Replace the target control with a new control.
    • UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE: Delete the target control.
  • template: The template of the control. The content is in XML format and action is BEFORE/AFTER/APPEND/FILL/REPLACE.
  • config: Control configuration object. It is invalid when action is REMOVE.
    • config.target: The name of the control in the above template. It is only required when action is BEFORE/AFTER/APPEND/FILL/REPLACE.

    • config.attrs: Set the html property of the control.

    • config.callback: The business logic implementation of the control. There are three ways to implement it:

      • function: The events of control will call this function, and override the built-in callbacks. The basic components that support function are (xbutton, dropdown-button, context-menu-item). If you want to add functionalities based on the built-in callbacks, you can use the second method.

      • controller class: Controller class can listen for components lifecycle and handle more component events:

            target: 'hand-tool',
            config: {
                callback: class extends UIExtension.Controller {
                    mounted() {
                        this.component.element.addEventListener('hover', e => {
                            console.info('mouse over', this.component)
                    handle() {
                        console.info('hand-tool clicked')
      • decorator object: it contains a series of function hooks for blocking the execution of the controller handle method, including before, after, thrown, and around.

            target: 'hand-tool',
            config: {
                callback: {
                    before: function() {
                        // The function executed before calling the handle method of controller. It can receive all parameters of the handle method.
                    after: function(returnValue) {
                       // The function executed after calling the handle method of controller. It can receive the return value and parameters of the handle function.
                    thrown: function(error) {
                        // The function executed when the handle method of controller throws an exception. It can receive the exception object and parameters.
                    around: function(callback, args) {
                        // It can receive the references and parameters of controller's handle method. Inside the around callback, you can execute code before/after running the handle function, or in the catch exception block. It also can decide whether to execute the handle method.
                            console.info('before callback');
                            var ret;
                            if(callback instanceof UIExtension.Controller) {
                                ret = callback.handle(...args);
                            } else {
                                ret = callback.apply(this, args);
                            console.info('after callback');
                            return ret;
                        }catch(e) {
                            console.error(e, 'an error occurred');
                        } finally {

# Note

It is recommended that only use fragment for UI fine-tuning. If you want to substantially modify the built-in layout, please refer to the methods described in Appearance and layout template.