女人自慰AV免费观看内涵网,日韩国产剧情在线观看网址,神马电影网特片网,最新一级电影欧美,在线观看亚洲欧美日韩,黄色视频在线播放免费观看,ABO涨奶期羡澄,第一导航fulione,美女主播操b

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

JS UI組件在線預(yù)覽功能和開發(fā)步驟

電子發(fā)燒友開源社區(qū) ? 來源:HarmonyOS官方合作社區(qū) ? 作者:HarmonyOS官方合作社 ? 2022-03-14 14:01 ? 次閱讀

一、介紹

以往大家如果想查看組件的使用效果,需要打開DevEco Studio構(gòu)建工程。現(xiàn)在為了便于大家高效開發(fā),文檔上線了JS UI組件在線預(yù)覽功能,無需本地構(gòu)建工程,在線即可修改組件樣式等參數(shù)、一鍵預(yù)覽編譯效果。程序員直呼:簡直不要太方便啦!讓我們通過下面這段視頻看一下效果~

看完視頻,你是不是也躍躍欲試?心動不如行動,復(fù)制下方鏈接,趕緊用起來吧~

JS API參考文檔(以Button組件為例):https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

二、組件功能和開發(fā)步驟

目前我們已經(jīng)上線了5個組件的在線預(yù)覽功能,分別為Button、List、Input、Image和Dialog。其中Input、Image和Dialog是近日上線的組件。接下來我們將以Button組件為例,為大家介紹組件的功能和開發(fā)步驟。

注:因篇幅有限,此處不再贅述其他組件,大家可自行前往官網(wǎng)查閱(末尾有組件鏈接哦~)。

1. Button(1)功能介紹:

Button是按鈕組件,用來響應(yīng)用戶的點擊操作,類型包括膠囊按鈕、圓形按鈕、文本按鈕、弧形按鈕和下載按鈕。開發(fā)者們可以在按鈕上綁定事件來響應(yīng)點擊操作后的自定義行為。

在線預(yù)覽效果(圖1):

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-button-0000000000621726#section1853220587610

(2)開發(fā)步驟:① 首先,在hml文件中創(chuàng)建一個基本的按鈕組件(圖2),并在css文件中添加樣式。

<buttonclass="buttons">按鈕button>
(左右滑動,查看更多)
/* xxx.css */.buttons {  margin-top: 15px;  width: 45%;  height: 45px;  text-align: center;  font-size: 14px;  border-radius: 10px;  background-color: #317aff;}
② 接著,將按鈕文本更改為Loading(圖3),添加waiting屬性來顯示按鈕的等待效果。

	 <button class="buttons" waiting="true">Loadingbutton>
(左右滑動,查看更多)

③ 最后,為按鈕綁定setProgress方法來實時顯示下載進度條的進度(圖4),同時在js文件中對setProcess方法進行自定義,實現(xiàn)進度條的遞增顯示效果。

 class="buttons"id="download-btn"waiting="true"type="download"onclick="setProgress">{{downloadText}}
(左右滑動,查看更多)
// xxx.js export default {  data: {     progress: 10,     downloadText: "進度條按鈕"     },     setProgress(e) {      var i=0      var set= setInterval(()=>{         i+=10         this.progress=i         this.downloadText = this.progress + "%";         this.$element('download-btn').setProgress({ progress: this.progress });         if(this.progress>=100){             clearInterval(set)             this.downloadText="完成"         }     },1000)  } }}
(左右滑動,查看更多)

其他組件請復(fù)制下方鏈接,自行前往官網(wǎng)查看:

Input組件:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673#section1853220587610

List組件:https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496#section1853220587610

Image組件:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-0000000000611597#section1853220587610

Dialog組件:

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-dialog-0000001050068157#section1853220587610

三、結(jié)語

好了,以上就是本期全部內(nèi)容,期待大家通過JS UI在線預(yù)覽實現(xiàn)精美的組件,也歡迎大家持續(xù)關(guān)注開發(fā)者文檔上新內(nèi)容。

原文標(biāo)題:UI組件在線預(yù)覽,程序員直呼“不要太方便~”

文章出處:【微信公眾號:HarmonyOS官方合作社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

審核編輯:湯梓紅


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 功能
    +關(guān)注

    關(guān)注

    3

    文章

    589

    瀏覽量

    29667
  • 開發(fā)
    +關(guān)注

    關(guān)注

    0

    文章

    372

    瀏覽量

    41331
  • 組件
    +關(guān)注

    關(guān)注

    1

    文章

    528

    瀏覽量

    18280

原文標(biāo)題:UI組件在線預(yù)覽,程序員直呼“不要太方便~”

文章出處:【微信號:HarmonyOS_Community,微信公眾號:電子發(fā)燒友開源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏

    評論

    相關(guān)推薦
    熱點推薦

    HarmonyOS應(yīng)用開發(fā)-UI設(shè)計開發(fā)預(yù)覽

    軟件要求安裝DevEcoStudio和Node.js,詳情請參考下載和安裝軟件提示:智能表UI開發(fā)預(yù)覽功能將在Beta2版本上線,當(dāng)前只能
    發(fā)表于 09-23 17:51

    【HarmonyOS HiSpark AI Camera試用連載 】鴻蒙JS UI介紹

    JS UI框架是一種跨設(shè)備的高性能UI開發(fā)框架,支持聲明式編程和跨設(shè)備多態(tài)UI。HTML5CSSJavaScript
    發(fā)表于 01-11 20:10

    JS應(yīng)用開發(fā)框架組件

    JS應(yīng)用開發(fā)框架組件簡介目錄接口使用相關(guān)倉簡介JS應(yīng)用開發(fā)框架,是OpenHarmony為開發(fā)
    發(fā)表于 04-23 18:05

    HarmonyOS 3.0.0開發(fā)預(yù)覽版全新發(fā)布

    開發(fā)類似功能的應(yīng)用時,JS代碼一般行數(shù)更少,開發(fā)效率更高。TS是JS的一個超集,有效地提升了JS
    發(fā)表于 10-25 15:49

    HarmonyOS 3.0.0開發(fā)預(yù)覽版全新發(fā)布

    開發(fā)類似功能的應(yīng)用時,JS代碼一般行數(shù)更少,開發(fā)效率更高。TS是JS的一個超集,有效地提升了JS
    發(fā)表于 11-19 18:29

    HarmonyOS UI組件在線預(yù)覽,程序員直呼“不要太方便~”

    一、介紹 以往大家如果想查看組件的使用效果,需要打開DevEco Studio構(gòu)建工程。現(xiàn)在為了便于大家高效開發(fā),文檔上線了JS UI組件
    發(fā)表于 03-10 14:22

    請問鴻蒙的JS UI如何獲得當(dāng)前組件的Value的值?

    鴻蒙的JS UI如何獲得當(dāng)前組件的Value的值和,自定義一個屬性customeVal的值{{title}}此處不一定是Button,有可能是Text,Image,也有可能是list的for循環(huán)
    發(fā)表于 04-07 11:52

    DevEco Studio有哪幾種預(yù)覽功能

    查看多個終端設(shè)備上的預(yù)覽效果。圖1 多端設(shè)備預(yù)覽**2 跳轉(zhuǎn) **為幫助開發(fā)者提升升級代碼開發(fā)效率,DevEco Studio 提供編輯連接器和連接器、
    發(fā)表于 05-26 15:42

    DevEco Studio強大的預(yù)覽功能讓開發(fā)效率大大提升!

    、雙向預(yù)覽為幫助開發(fā)者提升開發(fā)效率,DevEco Studio提供雙向預(yù)覽功能,支持代碼編輯器、預(yù)覽
    發(fā)表于 06-08 18:05

    全面支持JS/eTS應(yīng)用開發(fā),DevEco Studio 3.0 Beta4新版本發(fā)布

    功能,是DevEco Studio為開發(fā)者提供的可視化界面開發(fā)方式,具有豐富的UI界面編輯功能開發(fā)
    發(fā)表于 07-08 14:29

    全面支持JS/eTS應(yīng)用開發(fā),DevEco Studio 3.0 Beta4新版本發(fā)布

    ,是DevEco Studio為開發(fā)者提供的可視化界面開發(fā)方式,具有豐富的UI界面編輯功能開發(fā)者可自由拖拽
    發(fā)表于 07-11 17:37

    編程小白也能快速掌握的ArkUI JS組件開發(fā)

    好評。特別是它的ArkUI JS組件在線預(yù)覽功能,不但可以從中學(xué)習(xí)基礎(chǔ)組件的使用,還可以
    發(fā)表于 08-31 11:09

    如何用JS UI框架的List組件畫一個表格?

    本文作者:九弓子 前端最討厭的事:需要閱讀同事封裝的各種奇怪組件 前端最喜歡的事:分分鐘封裝一個自定義組件 對于以上描述,你是否也有同感?本期我們?yōu)榇蠹規(guī)淼氖?b class='flag-5'>開發(fā)者“九弓子”投稿的“如何用J
    的頭像 發(fā)表于 07-01 10:42 ?2380次閱讀

    在HarmonyOS版本下如何基于JS UI框架來開發(fā)

    作者:zhenyu ,華為軟件開發(fā)工程師 在當(dāng)前HarmonyOS版本下,如何基于JS UI框架來開發(fā)呢? 1JS
    的頭像 發(fā)表于 07-13 09:24 ?2381次閱讀

    編程小白分分鐘掌握ArkUI JS組件開發(fā)

    ArkUI JS組件在線預(yù)覽目前已經(jīng)嵌入在對應(yīng)組件的文檔中,文檔整體由兩部分組成:第一部分為該組件
    的頭像 發(fā)表于 08-31 09:21 ?1137次閱讀