Define Simple Panel
Sometimes we wish to create a simple panel, that doesn't need to dock to workspace. This can be done by set the type
to simple
.
Define
In the panel
field in package.json:
{
"name": "simple-package",
"panel": {
"main": "panel/index.html",
"type": "simple",
"title": "Simple Panel",
"width": 400,
"height": 300
}
}
By defining the panel
feild, and set the type
to simple
, our panel will be opened as simple panel. The simple panel will accept a html page as its entry point in main
.
The rest of things is just a web page:
<html>
<head>
<title>Simple Panel Window</title>
<meta charset="utf-8">
<style>
body {
margin: 10px;
}
h1 {
color: #f90
}
</style>
</head>
<body>
<h1>A simple panel window</h1>
<button id="btn">Send Message</button>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
Editor.log('on button clicked!');
});
</script>
</body>
</html>
Once we done, we can open the panel via Editor.Panel.open('simple-package')
.
The simple panel is similar to web page, it is used when you want to integrate some web app to Cocos Creator.