信息提示(Toast)

toast 用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。

提醒:WeUI 不推荐在 toast 中展示失败状态,失败状态应该使用 Alert 明确告知用户失败原因

<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
    </div>
</div>

Loading

loading 形态类似于 toast,只是图标是旋转的 loading,用于从服务端拉取数据/向服务端提交数据等耗时操作。

<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注