编写面板界面

通常在开始编写界面之前，我们总是希望能够在界面中看见点什么。我们可以通过面板定义函数的
和 style 选项来稍微在面板界面上绘制点东西。

一般我们会选择绘制一些区块用于规划界面布局，我们可以写以下代码：

通过以上代码，我们获得了一个如下的界面效果：

在界面排版过程中，有时候我们希望更好的表达元素之间的布局关系，比如我们喜欢 Top 和 Bottom 元素的高度固定为 30px，
而 Middle 元素的高度则撑满剩余空间。这个时候我们就可以使用 布局来制作。

我们可以这么修改 style 部分：

由于 CSS Flex 布局语法有些复杂，为了方便大家使用，Cocos Creator 对这部分进行了重新包装，关于这部分的详细介绍，请阅读 界面排版。

规划好布局后，我们就可以考虑加入界面元素来完成界面功能。通常，熟悉前端编程的开发人员会想到一些常用的
界面元素，如 <button>， 等等。这些元素当然是可以直接被使用，但是我们强烈推荐大家使用
Cocos Creator 的内置 UI Kit 元素。这些内置元素都是以 ui- 开头，例如 <ui-button>，<ui-input>。
Cocos Creator 提供了非常丰富的内置元素，开发人员可以通过 章节获得更详细
的了解。

让我们稍微丰富一下我们上面的面板：

如果一切正常，你将会看到如下界面：

最后让我们通过标准的事件处理代码来完成面板的逻辑部分。假设我们需要在每次点击预览按钮后，都会将 text-area
中输入的 Markdown 文档，渲染并显示在下方。我们可以做如下代码操作：

希望通过本节的代码示例，能够启发你进行面板界面开发的工作。当然，要灵活运用面板界面，还是需要深入学习和掌握 HTML5 标准。