鸿蒙应用开发JS-Popup气泡提示体验
Tiechui.Wang 2021-04-19 14:55:00 发布3827 浏览 30 点赞 14 收藏
Popup是气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作,下面通过案例来演示效果。
显示效果:

点击“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
©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
其它
标签
鸿蒙
相关推荐
鸿蒙实战项目案例_从零构建完整应用的完整复盘
周正
748
0鸿蒙生物识别开发:从指纹识别到3D人脸识别的完整指南
周正
1474
0鸿蒙NFC开发实战:从读卡器模式到卡模拟的完整实现
周正
558
0鸿蒙加密存储开发:数据安全保护的完整方案
周正
1120
0鸿蒙应用签名与上架完整流程:从开发到发布的实战指南
周正
1918
0
Tiechui.Wang
我还没有写个人简介......
1091
帖子
0
提问
893
粉丝
最新发布
华为应用市场增长优化师火热认证中
2025-03-10 10:16:02 发布华为应用市场斩获Pocket Gamer2023年移动游戏奖,全球第三大移动应用生态获行业认可
2024-04-27 11:06:07 发布热门推荐