mip-lightbox 彈層

2018-11-07 17:30 更新

mip-lightbox 是由用戶(hù)控制展現(xiàn)或關(guān)閉的一個(gè)全屏浮層組件,組件全屏覆蓋,組件里的元素超出屏幕會(huì)被隱藏,不能滑動(dòng)。

標(biāo)題內(nèi)容
類(lèi)型通用
支持布局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

說(shuō)明:組件ID
必選項(xiàng):是
類(lèi)型:字符串

layout

說(shuō)明:布局
必選項(xiàng):是
類(lèi)型:字符串
取值:nodisplay

注意事項(xiàng)

  • mip-lightbox 默認(rèn)是隱藏的,作為打開(kāi)開(kāi)關(guān)的 dom 節(jié)點(diǎn) 需設(shè)置 on 屬性,且 on 屬性的屬性值為 "tap:組件ID.open"。

  • mip-lightbox 需要一個(gè) div 子節(jié)點(diǎn),這個(gè) div 的 calss 必須有 lightbox,并且必須有 on 屬性,屬性值為"tap:組件ID.close"。

  • 依賴(lài) mipmain 最低版本為 1.1.2

以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)