Playground自上線以來，得到了廣大開發(fā)者的一致好評。特別是它的ArkUI JS組件在線預覽功能，不但可以從中學習基礎組件的使用，還可以在線體驗一鍵預覽的編譯效果。 通過Playground在線體驗，從前沒有接觸過編程的小白也可以分分鐘掌握開發(fā)！近期，Playground中ArkUI JS組件在線預覽又有更新啦~

以下為本次新增組件一覽：

●tabs：頁簽

●stepper：步驟導航器

●text：文本

●form：表單

●picker：選擇器

●toolBar：工具欄

●menus：菜單 話不多說，我們直接展示！

新增組件展示視頻

迫不及待想體驗的開發(fā)者們，歡迎即刻上手~

一、訪問方式及界面介紹

ArkUI JS組件在線預覽有兩種訪問方式，其內(nèi)容完全相同，可根據(jù)您的習慣進行選擇（以tabs組件為例）。

1. 通過“JS API參考”文檔訪問

ArkUI JS組件在線預覽目前已經(jīng)嵌入在對應組件的文檔中，文檔整體由兩部分組成：第一部分為該組件的功能介紹，第二部分為示例代碼的在線預覽界面。開發(fā)者們可直接在文檔頁面了解組件的使用方式，學習示例代碼的實現(xiàn)方法。




圖1 文檔訪問tabs組件界面

2. 通過Playground平臺訪問

Playground在線預覽界面左側(cè)為代碼區(qū)、右側(cè)為預覽區(qū)。開發(fā)者們通過修改左側(cè)HML、CSS、JS語言代碼，即可實現(xiàn)快速開發(fā)、一鍵編譯。

如下圖1所示：①區(qū)域為可實現(xiàn)在線預覽的組件案例場景，②區(qū)域為組件示例代碼查看與編輯區(qū)域，③區(qū)域為預覽區(qū)。




圖2 Playground平臺

二、在線預覽操作示例

在線預覽界面中：當修改組件示例代碼后，點擊即可一鍵預覽修改后的組件效果；點擊即可一鍵重置。

圖3 在線預覽界面 操作是不是超簡單、易上手~下面小編以tabs（頁簽）組件作為示例，給大家展開說明介紹。

1. tabs組件功能介紹：

tabs組件是一種可以通過頁簽進行內(nèi)容視圖切換的容器組件，被廣泛用于應用界面。通過添加tabs組件中的vertical屬性（false上下排列、true左右排列），可實現(xiàn)“橫向展示”與“縱向展示”。



圖4 tabs組件“橫向展示”預覽



圖5 tabs組件“縱向展示”預覽 在tabs組件中，tab-bar子組件用來展示頁簽區(qū)，tab-content子組件用來展示內(nèi)容區(qū)。注：如下圖所示，每個標簽對應一個內(nèi)容視圖。



圖6 子組件對應視圖

2. 案例展示視頻：

我們可以直接在線編輯HML模板文件及CSS樣式文件，來修改當前頁面的文件布局結(jié)構(gòu)以及頁面樣式。下面我們通過視頻展示一個簡單的“唐詩宋詞”頁簽內(nèi)容案例，感興趣的開發(fā)者們可以一起嘗試完成~ 以上就是本期內(nèi)容。目前Playground已上線共12個超級實用的ArkUI JS組件，除了本次示例的tabs（頁簽）外，其他組件介紹可前往官網(wǎng)查看。

審核編輯：劉清