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 在线体验等你来哟！