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

发布于 2021-4-17 14:49
浏览
0收藏

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

 

标签
已于2021-4-30 17:30:04修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐