Playground自上线以来，失去了宽广开发者的统一好评。特地是它的ArkUI JS组件在线预览性能，岂但能够从中学习根底组件的应用，还能够在线体验一键预览的编译成果。
通过Playground在线体验，从前没有接触过编程的小白也能够分分钟把握开发！近期，Playground中ArkUI JS组件在线预览又有更新啦~
以下为本次新增组件一览：
● tabs：页签
● stepper：步骤导航器
● text：文本
● form：表单
● picker：选择器
● toolBar：工具栏
● menus：菜单
急不可待想体验的开发者们，欢送即刻上手~

一、拜访形式及界面介绍

ArkUI JS组件在线预览有两种拜访形式，其内容完全相同，可依据您的习惯进行抉择（以tabs组件为例）。
1. 通过“JS API参考”文档拜访
ArkUI JS组件在线预览目前曾经嵌入在对应组件的文档中，文档整体由两局部组成：第一部分为该组件的性能介绍，第二局部为示例代码的在线预览界面。开发者们可间接在文档页面理解组件的应用形式，学习示例代码的实现办法。

                          图1 文档拜访tabs组件界面

文档拜访链接：https://developer.harmonyos.c...
2. 通过Playground平台拜访
Playground在线预览界面左侧为代码区、右侧为预览区。开发者们通过批改左侧HML、CSS、JS语言代码，即可实现疾速开发、一键编译。
如下图1所示：①区域为可实现在线预览的组件案例场景，②区域为组件示例代码查看与编辑区域，③区域为预览区。

                            图2 Playground平台拜访

Playground平台拜访链接：https://playground.harmonyos....

二、在线预览操作示例

在线预览界面中：当批改组件示例代码后，点击

即可一键预览批改后的组件成果；点击

即可一键重置。

图3 在线预览界面
操作是不是超简略、易上手~上面以tabs（页签）组件作为示例，给大家开展阐明介绍。
1. tabs组件性能介绍：
tabs组件是一种能够通过页签进行内容视图切换的容器组件，被宽泛用于利用界面。通过增加tabs组件中的vertical属性（false高低排列、true左右排列），可实现“横向展现”与“纵向展现”。

                          图4 tabs组件“横向展现”预览

                          图5 tabs组件“纵向展现”预览

在tabs组件中，tab-bar子组件用来展现页签区，tab-content子组件用来展现内容区。
注：如下图所示，每个标签对应一个内容视图。

                          图6 子组件对应视图

咱们能够间接在线编辑HML模板文件及CSS款式文件，来批改以后页面的文件布局构造以及页面款式。
以上就是本期内容。目前Playground已上线共12个超级实用的ArkUI JS组件，除了本次示例的tabs（页签）外，其余组件介绍可返回官网查看：
容器组件：
https://developer.harmonyos.c...
更多乏味的Playground在线体验等你来哟！