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.

results matching ""

    No results matching ""