Extension panel
When implementing a function, it is likely to require UI interaction on the interface. Cocos Creator 3D also provides this ability for extensions.
Declare the panel in the extension
The panels field can be defined in package.json
. Example:
{
"name": "hello-world",
"panels": {
"default": {
"title": "world panel",
"type": "dockable",
"main": "./panels/default.js",
"icon": "./static/default.png"
},
"list": {
"title": "world list",
"type": "simple",
"main": "./panels/list.js",
"icon": "./static/list.png",
"flags": {},
"size": {}
}
}
}
This field is an object, defined as the following:
// panels definition
interface PanelMap {
[name: string]: PanelInfo;
}
// The definition of each panel
interface PanelInfo {
// Panel title, supports i18n:key format
title: string;
// Panel entry, a relative path
main: string;
// Panel icon, a relative path
icon?: string;
// Panel type, default dockable
type?:'dockable' |'simple';
flags?: PanelFlags;
size?: PanelSize;
}
// Some tags in the panel
interface PanelFlags {
// Whether to allow zoom, default true
resizable?: boolean;
// Need to save, default false
save?: boolean;
}
// Some size limitations of panel
interface PanelSize {
width?: number;
height?: number;
'min-width'?: number;
'min-height'?: number;
}
Panel
The panel entry file was defined above when we registered it. Example:
// Listen for panel events
exports.linsteners = {
// The hook triggered when the panel is displayed
show() {},
// The hook triggered when the panel is hidden
hide() {},
};
// The contents of the panel
exports.template = '<div>Hello</div>';
// Styles on the panel
exports.style = 'div { color: yellow; }';
// Quick selector
exports.$ = {
elem: 'div',
};
// The hook function that is triggered when the panel starts
exports.ready = function() {
this.$.elem.innerHTML = 'Hello World';
};
// A function that fires when the panel is ready to close, and returns false terminates the panel
exports.beforeClose = function() {};
// The hook function after the panel is closed
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.