Extension panel

When implementing a function, it is likely to require UI interaction on the interface. Cocos Creator also provides this ability for extensions.

Declare the panel in the extension

The panels field can be defined in package.json. Example:

  1. {
  2. "name": "hello-world",
  3. "panels": {
  4. "default": {
  5. "title": "world panel",
  6. "type": "dockable",
  7. "main": "./panels/default.js",
  8. "icon": "./static/default.png"
  9. },
  10. "list": {
  11. "title": "world list",
  12. "type": "simple",
  13. "main": "./panels/list.js",
  14. "icon": "./static/list.png",
  15. "flags": {},
  16. "size": {}
  17. }
  18. }
  19. }

This field is an object, defined as the following:

  1. // panels definition
  2. interface PanelMap {
  3. [name: string]: PanelInfo;
  4. }
  5. // The definition of each panel
  6. interface PanelInfo {
  7. // Panel title, supports i18n:key format
  8. title: string;
  9. // Panel entry, a relative path
  10. main: string;
  11. // Panel icon, a relative path
  12. icon?: string;
  13. // Panel type, default dockable
  14. type?:'dockable' |'simple';
  15. flags?: PanelFlags;
  16. size?: PanelSize;
  17. }
  18. // Some tags in the panel
  19. interface PanelFlags {
  20. // Whether to allow zoom, default true
  21. resizable?: boolean;
  22. // Need to save, default false
  23. save?: boolean;
  24. }
  25. // Some size limitations of panel
  26. interface PanelSize {
  27. width?: number;
  28. height?: number;
  29. 'min-width'?: number;
  30. 'min-height'?: number;
  31. }

Panel

The panel entry file was defined above when we registered it. Example:

  1. // Listen for panel events
  2. exports.listeners = {
  3. // The hook triggered when the panel is displayed
  4. show() {},
  5. // The hook triggered when the panel is hidden
  6. hide() {},
  7. };
  8. // The contents of the panel
  9. exports.template = '<div>Hello</div>';
  10. // Styles on the panel
  11. exports.style = 'div { color: yellow; }';
  12. // Quick selector
  13. exports.$ = {
  14. elem: 'div',
  15. };
  16. // The hook function that is triggered when the panel starts
  17. exports.ready = function() {
  18. this.$.elem.innerHTML = 'Hello World';
  19. };
  20. // A function that fires when the panel is ready to close, and returns false terminates the panel
  21. exports.beforeClose = function() {};
  22. // The hook function after the panel is closed
  23. exports.close = function() {};

In addition, we have defined a list panel, and we also need to write a list.js file in the above format.