效果展示:
![pYYBAGJHuMWAGMtOAACqQFk9g3s481.png](http://file.elecfans.com/web2/M00/3B/1D/pYYBAGJHuMWAGMtOAACqQFk9g3s481.png)
說明:
該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
氣泡指示。在點(diǎn)擊綁定的控件后會彈出相應(yīng)的氣泡提示來引導(dǎo)用戶進(jìn)行操作。
屬性:
![pYYBAGJHuQ2ABWpWAACvVWPmzWY075.png](http://file.elecfans.com/web2/M00/3B/1D/pYYBAGJHuQ2ABWpWAACvVWPmzWY075.png)
事件:
![pYYBAGJHuSyAJS5sAAAaWLBe1K0781.png](http://file.elecfans.com/web2/M00/3B/1D/pYYBAGJHuSyAJS5sAAAaWLBe1K0781.png)
方法:
![pYYBAGJHuT-AHqOcAAAWl7K7TrM226.png](http://file.elecfans.com/web2/M00/3B/1D/pYYBAGJHuT-AHqOcAAAWl7K7TrM226.png)
說明:
1.popup氣泡彈窗屬性、樣式均不支持動態(tài)更新。
2.popup氣泡彈窗的margin樣式是相對于target元素進(jìn)行生效的,如popup在target元素下方,此時只生效margin-top樣式,popup在target元素左上方,此時只生效margin-bottom和margin-right樣式。
3.popup的border四邊樣式需一致,若四邊設(shè)置不一致且圓角為零,則按左、上、右、下的順序取第一個被設(shè)置的樣式,否則border不生效。
4.popup的target組件的click事件不生效。
代碼示例:
Click to show the pop-upText content of the pop-upClick to show the pop-up
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
padding-top: 200px;
}
.popup {
mask-color: gray;
}
.text {
color: white;
}
.button {
width: 220px;
height: 70px;
margin-top: 50px;
}
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
});
},
showpopup() {
this.$element("popup").show();
},
hidepopup() {
this.$element("popup").hide();
},
}
審核編輯:符乾江
-
Popup
+關(guān)注
關(guān)注
0文章
5瀏覽量
1342 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1982瀏覽量
30576
發(fā)布評論請先 登錄
相關(guān)推薦
【HarmonyOS】組件開發(fā)指南
鴻蒙應(yīng)用開發(fā)JS-Popup氣泡提示體驗(yàn)
HarmonyOS應(yīng)用開發(fā)-三方UI線程圖組件練習(xí)
HarmonyOS組件更新,新增700+開源組件
HarmonyOS應(yīng)用開發(fā)資料(Svg組件)
【組件資料】HarmonyOS三方件開發(fā)指南
HarmonyOS應(yīng)用開發(fā)-popup氣泡指示組件練習(xí)
HarmonyOS popup氣泡指示組件的操作方法
如何實(shí)現(xiàn)HarmonyOS Java端的氣泡聊天框?
HarmonyOS鴻蒙原生應(yīng)用開發(fā)設(shè)計(jì)- 服務(wù)組件庫
華為開發(fā)者HarmonyOS零基礎(chǔ)入門:UI組件設(shè)計(jì)開發(fā)實(shí)踐
![華為<b class='flag-5'>開發(fā)</b>者<b class='flag-5'>HarmonyOS</b>零基礎(chǔ)入門:UI<b class='flag-5'>組件</b>設(shè)計(jì)<b class='flag-5'>開發(fā)</b>實(shí)踐](https://file.elecfans.com/web2/M00/19/1B/poYBAGFzeQ2AaiUNAAWi7fViCKk130.png)
用于openharmony的氣泡組件
![用于openharmony的<b class='flag-5'>氣泡</b><b class='flag-5'>組件</b>](https://file.elecfans.com/web2/M00/37/04/pYYBAGI5LSSAQesAAAB7IBYZVXw452.jpg)
評論