mip-lightbox 弹层


mip-lightbox est un composant de calque flottant plein écran qui est affiché ou fermé sous le contrôle de l'utilisateur. Le composant couvre tout l'écran. Les éléments du composant qui dépassent l'écran seront masqués et ne pourront pas glisser.

QQ截图20170204115730.png

Exemple

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

Attributs

id

Description : ID du composant
Obligatoire : Oui
Type : Chaîne

layout

Description : Layout
Obligatoire : Oui
Type : String
Valeur ：non afficher

Remarques

  • mip-lightbox est masqué par défaut. Le nœud dom utilisé comme commutateur ouvert doit définir l'attribut on, et la valeur de l'attribut on est "tap: composant ID.open".

  • En tant que nœud dom qui ferme la lightbox, vous devez définir l'attribut on, et la valeur de l'attribut on est "tap: composant ID.close".

  • En même temps, en tant que nœud dom qui ouvre et ferme la lightbox, vous devez définir l'attribut on, et la valeur de l'attribut on est "tap: composant ID.toggle".

  • mip-lightbox nécessite un nœud enfant div, et les classes de ce div doivent avoir une lightbox.