CocosCreator3D插件教程(7)：给插件面板添加UI元素

xu_yanfeng

已于 2024-09-08 11:13:25 修改

阅读量658

点赞数

分类专栏： CocosCreator3D插件教程文章标签： cocos-creator plugin

于 2020-11-14 15:14:48 首次发布

本文链接：https://blog.youkuaiyun.com/xx774177933xx/article/details/109691296

版权

23 篇文章

订阅专栏

本教程介绍了如何在CocosCreator3D插件中添加UI元素，如按钮，并通过HTML语法实现。首先，我们创建新的逻辑文件并编写添加按钮的代码。然后，通过激活插件面板来查看按钮效果。最后，通过CSS美化界面，使按钮更具个性化。对于不熟悉web前端的开发者，这是一个学习的好机会。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上节教程中，我们给插件添加了UI面板，一般UI都会有按钮、输入框，那么我们如何给面板添加一些元素呢？

我们再熟悉下package.json里面的panels：

{
	// ...
	"panels": {
    "default": {
      "title": "UI面板",
      "type": "dockable",
      "main": "./panel.js"
    }
}

我们在插件目录新建一个panel.js

并在panel.js中添加以下代码：

exports.template = `<button>按钮</button>`;

有没有很熟悉的感觉，没错，这就是HTML，你可以在里面使用html的任何标签！

代码编写完毕，我们该如何刷新面板呢？

这里我们就不需要在扩展管理器中重启插件，

只需要激活插件面板窗口，然后重新加载下就能看到刚才添加的按钮，如下图所示：

重新加载时，请注意你当前激活的窗口。

添加的按钮似乎有点丑，我们希望他更加个性化，这里就需要使用到了css

exports.template = `<button class="btn">按钮</button>`;
exports.style= `
.btn{
    width:100px;
    height:100px;
}`;

熟悉web前端的小伙伴对这个应该不会陌生，我们还可以这么写，都是同样的效果：

exports.template = `
<button style="width: 100px;height: 100px;">
    按钮
</button>`;

我们再刷新下界面，就会看到按钮已经发生了变化：

这里我就抛砖引玉，不再赘述输入框怎么添加了，对web前端不熟悉的小伙伴，咱就花点时间学习学习。