mip-lightbox 弹层

2018-11-07 17:30 更新

mip-lightbox 是由用户控制展现或关闭的一个全屏浮层组件,组件全屏覆盖,组件里的元素超出屏幕会被隐藏,不能滑动。

标题内容
类型通用
支持布局N/S
所需脚本https://mipcache.bdstatic.com/static/v1.2/mip-lightbox.js

示例

<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0">
    Open lightbox
</button>

<mip-lightbox
    id="my-lightbox"
    layout="nodisplay">
    <div class="lightbox" on="tap:my-lightbox.close">
        <h1>Hello, World!</h1>
        <p> this is the lightbox</p>
    </div>
</mip-lightbox>

属性

id

说明:组件ID
必选项:是
类型:字符串

layout

说明:布局
必选项:是
类型:字符串
取值:nodisplay

注意事项

  • mip-lightbox 默认是隐藏的,作为打开开关的 dom 节点 需设置 on 属性,且 on 属性的属性值为 "tap:组件ID.open"。

  • mip-lightbox 需要一个 div 子节点,这个 div 的 calss 必须有 lightbox,并且必须有 on 属性,属性值为"tap:组件ID.close"。

  • 依赖 mipmain 最低版本为 1.1.2

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号