`
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">
<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;
}
完整代码地址:
`