Popup

さまざまな方向から表示されるポップアップ層です。

コード例

Bottom PopupCenter Popup

Bottom Popup

This popup slides up from the bottom. Tap close or overlay to dismiss.

Success

Operation completed

表示方向

ボタンで実際のポップアップを表示

<m-button @click="showBottom = true">Bottom</m-button>

<m-popup :show="showBottom" position="bottom" round closeable
  @close="showBottom = false">
  <div style="padding: 32px 24px; min-height: 200px;">
    <h3>Bottom Popup</h3>
    <p>Content here</p>
  </div>
</m-popup>

API

プロパティ

属性	说明	类型	默认值
show	表示するか	boolean	false
position	表示位置	center | top | bottom | left | right	center
round	角を丸くするか	boolean	false
closeable	閉じるボタンを表示するか	boolean	false
overlay	マスクを表示するか	boolean	true
close-on-click-overlay	マスククリックで閉じるか	boolean	true
duration	アニメーション時間（ms）	number	300

イベント

属性	说明	类型	默认值
close	閉じるとき	-	-
opened	開くアニメーション終了後	-	-
closed	閉じるアニメーション終了後	-	-