Popup

Popup layer that can slide in from different directions.

Code examples

Bottom PopupCenter Popup

Bottom Popup

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

Success

Operation completed

Positions

Click buttons to open real popups

<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

Props

属性	说明	类型	默认值
show	Visibility	boolean	false
position	Placement	center | top | bottom | left | right	center
round	Rounded corners	boolean	false
closeable	Show close button	boolean	false
overlay	Show overlay mask	boolean	true
close-on-click-overlay	Close when the overlay is clicked	boolean	true
duration	Animation duration (ms)	number	300

Events

属性	说明	类型	默认值
close	Fires when closing	-	-
opened	Fires after open animation completes	-	-
closed	Fires after close animation completes	-	-