对话框

QDialog组件是提供给用户选择特定操作或操作列表的好方式。 他们还可以向用户提供重要信息,或要求他们作出决定(或多项决定)。

从用户界面的角度来看,你可以将对话视为一种浮动模态框,它只覆盖屏幕的一部分。 这意味着对话框只能用于快速操作,例如验证密码、收到简短的应用通知或快速选择一个或多个选项。

TIP

对话框也可以用作更基本的用例的全局可用方法,例如原生JS alert()、prompt()等。对于后一种行为,请转到对话框插件页面 。

TIP

当用户点击手机/平板电脑后退按钮(仅适用于Cordova应用程序)时,对话框将自动关闭。 同样,在桌面浏览器上,除非另有配置,否则单击ESCAPE键也将关闭对话框,与单击或触摸对话框外部一样。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

注意

最好您的QDialog主要内容是QCard。 但是,如果您打算使用任何其他组件(例如QForm)或标签,请确保QDialog的直接子级使用<div>标签渲染(或自己包裹)。

基础

Basic

样式

Styling

定位

Positions

TIP

不要将“position”属性与显示/隐藏动画一起使用。 如果您想要自定义动画,则应使用transition-showtransition-hide,无论“position”还是“maximized”都可以应用。

Maximized

各种内容

对话框可以包含任何内容。一些例子:

Various content
With containerized QLayout

TIP

如果要使用容器化的QLayout,则需要在QDialog上放置一个宽度(如果使用左/右位置),或者一个高度(如果使用顶部/底部位置)。 您可以使用vw和vh单位。

处理滚动

Scrollable dialogs

不同模式

用户无法通过按ESCAPE键或在其背景上单击/轻击来关闭该对话框。

Persistent

对话框也可以成为页面的一部分,而无需立即聚焦。 这是“无缝”模式发挥作用的地方:

Seamless

对话框中的对话框

您可以在无限多个深度级别的其他对话框之上打开对话框。

Inception

大小

您可以自定义对话框的大小。 注意,我们要么篡改内容的样式,要么使用full-widthfull-height属性:

Sizing examples

QDialog API

Loading API...
Please wait...