效果展示:

說明:
該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。
氣泡指示。在點擊綁定的控件后會彈出相應(yīng)的氣泡提示來引導(dǎo)用戶進行操作。
屬性:

事件:

方法:

說明:
1.popup氣泡彈窗屬性、樣式均不支持動態(tài)更新。
2.popup氣泡彈窗的margin樣式是相對于target元素進行生效的,如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瀏覽量
1373 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
2005瀏覽量
31698
發(fā)布評論請先 登錄
相關(guān)推薦
【HarmonyOS】組件開發(fā)指南
鴻蒙應(yīng)用開發(fā)JS-Popup氣泡提示體驗
HarmonyOS應(yīng)用開發(fā)-三方UI線程圖組件練習
HarmonyOS組件更新,新增700+開源組件
HarmonyOS應(yīng)用開發(fā)資料(Svg組件)
【組件資料】HarmonyOS三方件開發(fā)指南
HarmonyOS應(yīng)用開發(fā)-popup氣泡指示組件練習
HarmonyOS popup氣泡指示組件的操作方法
如何實現(xiàn)HarmonyOS Java端的氣泡聊天框?
HarmonyOS鴻蒙原生應(yīng)用開發(fā)設(shè)計- 服務(wù)組件庫
華為開發(fā)者HarmonyOS零基礎(chǔ)入門:UI組件設(shè)計開發(fā)實踐

用于openharmony的氣泡組件

評論