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

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

●tabs：頁(yè)簽

●stepper：步驟導(dǎo)航器

●text：文本

●form：表單

●picker：選擇器

●toolBar：工具欄

●menus：菜單 話(huà)不多說(shuō)，我們直接展示！

新增組件展示視頻

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

一、訪問(wèn)方式及界面介紹

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

1. 通過(guò)“JS API參考”文檔訪問(wèn)

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




圖1 文檔訪問(wèn)tabs組件界面

2. 通過(guò)Playground平臺(tái)訪問(wèn)

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

如下圖1所示：①區(qū)域?yàn)榭蓪?shí)現(xiàn)在線(xiàn)預(yù)覽的組件案例場(chǎng)景，②區(qū)域?yàn)榻M件示例代碼查看與編輯區(qū)域，③區(qū)域?yàn)轭A(yù)覽區(qū)。




圖2 Playground平臺(tái)

二、在線(xiàn)預(yù)覽操作示例

在線(xiàn)預(yù)覽界面中：當(dāng)修改組件示例代碼后，點(diǎn)擊即可一鍵預(yù)覽修改后的組件效果；點(diǎn)擊即可一鍵重置。

圖3 在線(xiàn)預(yù)覽界面 操作是不是超簡(jiǎn)單、易上手~下面小編以tabs（頁(yè)簽）組件作為示例，給大家展開(kāi)說(shuō)明介紹。

1. tabs組件功能介紹：

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



圖4 tabs組件“橫向展示”預(yù)覽



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



圖6 子組件對(duì)應(yīng)視圖

2. 案例展示視頻：

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

審核編輯：劉清