mip-lightbox elastic layer


mip-lightbox is a full-screen floating component that is displayed or closed under user control. The component covers the entire screen. Elements in the component that exceed the screen will be hidden and cannot slide.

QQ截图20170204115730.png

Example

<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>

Attribute

id

Description: Component ID
Required option: Yes
Type: String

layout

Description: Layout
Required option: Yes
Type: String
Value: nodisplay

Notes

  • mip-lightbox is hidden by default. The dom node used as the open switch needs to set the on attribute, and the attribute value of the on attribute is "tap: component ID.open".

  • As a dom node that closes the lightbox, you need to set the on attribute, and the on attribute value is "tap: component ID.close".

  • The dom node that also opens and closes the lightbox needs to set the on attribute, and the on attribute value is "tap: component ID.toggle".

  • mip-lightbox requires a div child node, and the calss of this div must have a lightbox.