鸿蒙应用开发JS-Popup气泡提示体验
头像 Tiechui.Wang 2021-04-19 14:55:00    发布
3827 浏览 30 点赞 14 收藏

Popup是气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作,下面通过案例来演示效果。

显示效果:

 

鸿蒙应用开发JS-Popup气泡提示体验-鸿蒙开发者社区


点击“popup”

 

鸿蒙应用开发JS-Popup气泡提示体验-鸿蒙开发者社区


Hml文件中的代码


<div class="container">
    <text id="text">这个是popup组件</text>
<!-- popup supports single child of any type5+ -->
    <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
        <text class="text">文本内容是关于popup组件的</text>
    </popup>
    <button class="button" onclick="showpopup">popup</button>
</div>
Css文件中的代码
.container {
    flex-direction: column;
    align-items: center;
    padding: 200px;
}
.popup {
    mask-color: gray;
}
.text {
    color: white;
}
.button {
    width: 220px;
    height: 70px;
    margin-top: 50px;
}

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/popup


©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
其它
地址:北京市朝阳区北三环东路三元桥曙光西里甲1号第三置业A座1508室 商务内容合作QQ:2291221 电话:13391790444或(010)62178877
版权所有:电脑商情信息服务集团 北京赢邦策略咨询有限责任公司
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,我司致力于保护作者版权,如有侵权,请与我司联系删除
京ICP备:2022009079号-2
京公网安备:11010502051901号
ICP证:京B2-20230255