RM新时代网站-首页

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

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

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

HarmonyOS應(yīng)用開發(fā)—popup氣泡指示組件練習(xí)

鴻蒙時(shí)代 ? 來(lái)源:鴻蒙時(shí)代 ? 作者:鴻蒙時(shí)代 ? 2022-04-02 10:49 ? 次閱讀

效果展示:

pYYBAGJHuMWAGMtOAACqQFk9g3s481.png

說(shuō)明:
該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

氣泡指示。在點(diǎn)擊綁定的控件后會(huì)彈出相應(yīng)的氣泡提示來(lái)引導(dǎo)用戶進(jìn)行操作。

屬性:

pYYBAGJHuQ2ABWpWAACvVWPmzWY075.png


事件:

pYYBAGJHuSyAJS5sAAAaWLBe1K0781.png

方法:

pYYBAGJHuT-AHqOcAAAWl7K7TrM226.png

說(shuō)明:
1.popup氣泡彈窗屬性、樣式均不支持動(dòng)態(tài)更新。
2.popup氣泡彈窗的margin樣式是相對(duì)于target元素進(jìn)行生效的,如popup在target元素下方,此時(shí)只生效margin-top樣式,popup在target元素左上方,此時(shí)只生效margin-bottom和margin-right樣式。
3.popup的border四邊樣式需一致,若四邊設(shè)置不一致且圓角為零,則按左、上、右、下的順序取第一個(gè)被設(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();
    },
}

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

    關(guān)注

    0

    文章

    5

    瀏覽量

    1324
  • HarmonyOS
    +關(guān)注

    關(guān)注

    79

    文章

    1973

    瀏覽量

    30143
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    HarmonyOS開發(fā)案例:【常用組件與布局】

    HarmonyOS ArkUI提供了豐富多樣的UI組件,您可以使用這些組件輕松地編寫出更加豐富、漂亮的界面。
    的頭像 發(fā)表于 05-09 18:20 ?1209次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)</b>案例:【常用<b class='flag-5'>組件</b>與布局】

    鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【Popup控制】 通用屬性

    組件綁定popup彈窗,并設(shè)置彈窗內(nèi)容,交互邏輯和顯示狀態(tài)。
    的頭像 發(fā)表于 06-05 14:36 ?1264次閱讀
    鴻蒙ArkTS聲明式<b class='flag-5'>開發(fā)</b>:跨平臺(tái)支持列表【<b class='flag-5'>Popup</b>控制】 通用屬性

    HarmonyOS組件開發(fā)指南

    HarmonyOS軟件以組件(bundel)作為基本單元,從系統(tǒng)角度看,凡是運(yùn)行在HarmonyOS上的軟件都可以定義為組件;一般來(lái)講,根據(jù)組件
    發(fā)表于 09-18 17:14

    鴻蒙應(yīng)用開發(fā)JS-Popup氣泡提示體驗(yàn)

    `Popup氣泡指示。在點(diǎn)擊綁定的控件后會(huì)彈出相應(yīng)的氣泡提示來(lái)引導(dǎo)用戶進(jìn)行操作,下面通過(guò)案例來(lái)演示效果。顯示效果: 點(diǎn)擊“popup” H
    發(fā)表于 04-18 11:12

    HarmonyOS應(yīng)用開發(fā)-三方UI線程圖組件練習(xí)

    HarmonyOS已陸續(xù)推出1000+組件,包含UI、動(dòng)畫圖形、框架、安全、工具、網(wǎng)絡(luò)、文件數(shù)據(jù)、多媒體、圖片緩存和基礎(chǔ)功能,具有多設(shè)備形態(tài)可用、多端部署、性能優(yōu)化三大特點(diǎn)。使用組件可以快速進(jìn)行項(xiàng)目
    發(fā)表于 10-23 11:13

    HarmonyOS組件更新,新增700+開源組件

    組件是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝,通過(guò)使用現(xiàn)成的組件讓應(yīng)用開發(fā)更加簡(jiǎn)單高效。自HarmonyOS組件開源以來(lái),經(jīng)兩次上線,已開源了700+的Ja
    發(fā)表于 11-18 11:17

    HarmonyOS應(yīng)用開發(fā)資料(Svg組件

    1、HarmonyOS應(yīng)用開發(fā)-Svg組件circle  該組件從API version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。2、
    發(fā)表于 03-17 14:49

    組件資料】HarmonyOS三方件開發(fā)指南

    1、HarmonyOS三方件開發(fā)指南——LoadingView組件1.LoadingView組件功能介紹1.1.功能介紹:LoadingView組件
    發(fā)表于 03-21 11:18

    HarmonyOS應(yīng)用開發(fā)-popup氣泡指示組件練習(xí)

    效果展示: 說(shuō)明:該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。氣泡指示。在點(diǎn)擊綁定的控件后會(huì)彈出相應(yīng)的氣泡提示來(lái)引導(dǎo)用戶進(jìn)行
    發(fā)表于 04-02 11:09

    HarmonyOS popup氣泡指示組件的操作方法

    效果展示:說(shuō)明:該組件從API version 4開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。氣泡指示。在點(diǎn)擊綁定的控件后會(huì)彈出相應(yīng)的氣泡提示來(lái)引導(dǎo)用戶進(jìn)行操
    發(fā)表于 04-02 11:31

    如何實(shí)現(xiàn)HarmonyOS Java端的氣泡聊天框?

      HarmonyOSJava端的氣泡聊天框怎么實(shí)現(xiàn)?android上有9圖可實(shí)現(xiàn)?鴻蒙上有什么類似的方案沒(méi)?
    發(fā)表于 06-13 09:59

    HarmonyOS鴻蒙原生應(yīng)用開發(fā)設(shè)計(jì)- 服務(wù)組件庫(kù)

    HarmonyOS設(shè)計(jì)文檔中,為大家提供了一些已經(jīng)設(shè)計(jì)好的原生服務(wù)組件庫(kù),開發(fā)者可以根據(jù)需要直接引用。 開發(fā)者直接使用官方提供的服務(wù)組件庫(kù)樣
    發(fā)表于 10-24 16:12

    華為開發(fā)HarmonyOS零基礎(chǔ)入門:UI組件設(shè)計(jì)開發(fā)實(shí)踐

    華為開發(fā)HarmonyOS零基礎(chǔ)入門:UI組件設(shè)計(jì)開發(fā)實(shí)踐之圖庫(kù)應(yīng)用介紹,應(yīng)用數(shù)據(jù)加載顯示模型圖片加載渲染功能快速在其他應(yīng)用上。
    的頭像 發(fā)表于 10-23 10:58 ?1666次閱讀
    華為<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í)踐

    用于openharmony的氣泡組件

    用于openharmony的氣泡組件,具有自定義筆劃寬度和顏色、箭頭大小、位置和方向。BubbleLayout 擴(kuò)展了 StackLayout。 屬性 您可以設(shè)置幾個(gè)屬性:
    發(fā)表于 03-22 09:55 ?2次下載
    用于openharmony的<b class='flag-5'>氣泡</b><b class='flag-5'>組件</b>

    OHOS中實(shí)現(xiàn)各個(gè)方向的氣泡彈窗案例

    項(xiàng)目介紹 實(shí)現(xiàn)各個(gè)方向的氣泡彈窗,可控制氣泡尖角偏移量 安裝教程 在entry的build.gradle中添加依賴 依賴項(xiàng) { ... 實(shí)施 ‘com.gitee.archermind-ti:bubble-popup-windo
    發(fā)表于 03-25 13:44 ?2次下載
    RM新时代网站-首页