mip-lightbox 弹层


mip-lightbox は、ユーザーの制御下で表示または閉じられるフルスクリーンのフローティング レイヤー コンポーネントです。コンポーネント内の画面を超える要素は非表示になり、スライドできません。

QQ截图20170204115730.png

例

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

<mip-lightbox
    id="my-lightbox"
    layout="nodisplay"
    class="mip-hidden">
    <div class="lightbox">
        <h1>Hello, World!</h1>
        <p> this is the lightbox</p>
    </div>
</mip-lightbox>

属性

id

説明: コンポーネントID
必須: はい
タイプ: String

layout

説明: レイアウト
必須: はい
タイプ: String
Value :nodis遊ぶ

メモ

  • mip-lightboxはデフォルトでは非表示になっており、オープンスイッチとして使用するdomノードにはon属性を設定する必要があり、on属性の属性値は「tap:コンポーネントID.open」となっています。

  • ライトボックスを閉じるdomノードとしてon属性を設定する必要があり、on属性の値は「tap:コンポーネントID.close」です。

  • 同時にライトボックスを開閉するdomノードとしてon属性を設定する必要があり、on属性の値は「tap:コンポーネントID.toggle」となっています。

  • mip-lightbox には div 子ノードが必要で、この div の cals にはライトボックスが必要です。