Popup Proxy

QPopupProxy should be used when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed. It acts as a proxy which picks either of the two components to use. QPopupProxy also handles context-menus.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QPopupProxy'
    ],
    // not needed if using auto-import feature:
    directives: [
      'ClosePopup'
    ]
  }
}

Usage

TIP

Use your browsers development tools to toggle the device between mobile or desktop (with browser refresh after each change) or, physically resize your browser’s window to watch the QPopupProxy component switch between either a QMenu or a QDialog before clicking/tapping on its container. The default breakpoint is set at 450px.

Standard



Context menu (right click / long tap)



On the example below, click on the icon in the input.

Breakpoint @600px



Pass-through props

Keep in mind that all props from both QMenu and QDialog are passed through via this component. So props like offset or transition-show (as a mere example) can be used in conjunction with QPopupProxy.

Props from QMenu or QDialog



WARNING

QPopupProxy treats some components (QDate, QTime, QCarousel and QColor) as special ones and forces cover: true and maxHeight: '99vh' on them. If you don’t want this behavior just place a div as the first level child of QPopupProxy.

QPopupProxy API