밉라이트박스 弹层


mip-lightbox는 사용자 제어에 따라 표시되거나 닫히는 전체 화면 플로팅 레이어 구성 요소입니다. 구성 요소에서 화면을 벗어나는 요소는 숨겨지고 슬라이드할 수 없습니다.

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>

Attributes

id

Description: Component ID
필수: Yes
Type: String

layout

Description: Layout
필수: Yes
Type: String
Value ：nodisplay

메모

  • mip-lightbox는 기본적으로 숨겨져 있습니다. 오픈 스위치로 사용되는 dom 노드는 on 속성을 설정해야 하며, on 속성의 속성 값은 "tap: component ID.open"입니다.

  • 라이트박스를 닫는 dom 노드로 on 속성을 설정해야 하며, on 속성 값은 "tap:Component ID.close"입니다.

  • 동시에 라이트박스를 열고 닫는 dom 노드로 on 속성을 설정해야 하며, on 속성 값은 "tap:컴포넌트 ID.toggle"입니다.

  • mip-lightbox에는 div 하위 노드가 필요하며 이 div의 호출에는 라이트박스가 있어야 합니다.