[文章]鸿蒙应用开发JS-Popup气泡提示体验

阅读量0
0
4
`
Popup是气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作,下面通过案例来演示效果。
显示效果:
点击“popup”
图片2.png
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">
        <text class="text">文本内容是关于popup组件的</text>
    </popup>
    <button class="button">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;
}
完整代码地址:

`
图片1.png

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友