弹出式窗口和对话框

使用弹出式窗口和对话框可显示信息并提示用户进行响应。它们适用于以下情况:

  • 确认用户请求,如删除记录。
  • 专注于一项重要任务,如新建库存订单。
  • 显示用户需要确认的重要信息。
  • 在用户完成某项操作后显示事务正在进行中。

Google 应用制作工具支持两种类型的对话框:

  • 弹出式窗口 - 这些是可涵盖各类通知场景的预配置对话框。弹出式窗口应遵循 Material Design 标准。
  • 自定义对话框 - 这些是您创建的用于通知应用用户的页面或页面片段。设置自定义对话框需要执行更多操作。不过,如果您的应用使用不同的(非 Material Design)外观和风格,则自定义对话框会非常有用。

使用 Google 应用制作工具的内置弹出式窗口

使用弹出式窗口是向应用快速添加模态和非模态互动和通知的极好方法。

您可以像添加页面或页面片段一样添加弹出式窗口:

  1. 将指针悬停在页面上,点击“添加”add,然后点击弹出式窗口
  2. 修改弹出式对话框文本。
  3. 使用属性编辑器配置 onClick 以及其他用于控制弹出式窗口如何工作的属性。

空白弹出式窗口

这可用作自定义弹出式窗口的空白画布。它不包含生成的内容,因此您需要通过添加微件来构建对话框。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口及其微件的外观和事件。

使用导航菜单可添加一个从屏幕左侧滑动显示并显示应用的导航目的地的菜单。导航菜单仅链接到其创建时就已存在的页面。如果您稍后向应用添加页面,则需要手动将这些页面添加到菜单。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口的外观和事件。此外,您还可以修改菜单上显示的文本,也可以拖动页面以重排顺序。

确认对话框

使用确认对话框可请用户确认是否真的要继续他们刚刚调用的操作。此对话框通常与和该操作相关的警告或重要信息配对出现。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口的外观和事件。

此外,此弹出式窗口可用于要求您执行下列操作:

  • 修改标题。确认对话框标题应该富有意义,并能反映所请求的操作。
  • 修改文本字段,以说明如果用户完成相应操作会出现什么情况。
  • 更改按钮文本,并向其分配 onClick 事件。

通知对话框

使用此弹出式窗口可告知用户非关键事件或操作。这无需用户输入。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口的外观和事件。默认情况下,点击知道了! 按钮可关闭该对话框。

此外,此弹出式窗口可用于要求您执行下列操作:

  • 修改标题。对话框标题应该富有意义,并能反映其后的说明。
  • 修改文本字段,以说明应用正在执行的操作。

使用此弹出式窗口可请用户在您的应用完成任务后稍加等待。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口的外观和事件。

信息提示控件

使用此弹出式窗口可通过屏幕底部的消息提供与操作相关的简短反馈。它们包含与操作相关的单行文本。

自定义此弹出式窗口

属性编辑器中配置此弹出式窗口的外观和事件。

此外,此弹出式窗口可用于要求您执行下列操作:

  • 修改文本字段。它应该是与操作相关的单行文本。
  • 如有必要,请将按钮文本从关闭更改为更合适的操作并更新其 onClick 事件。

创建自定义对话框

您可以将任何页面或页面片段用作对话框:

  1. 将按钮拖至页面中,然后点击其 onClick 属性。
  2. 选择打开对话框预设操作。
  3. 选择要作为对话框打开的页面或页面片段。

或者,您可以在客户端脚本中编写代码,将名为 MyDialog 的页面显示为对话框:

app.showDialog(app.pages.MyDialog);
    

关闭对话框

要在应用用户点击按钮时关闭已打开的对话框,请执行以下操作:

  1. 选择按钮微件,然后点击 onClick 属性。
  2. 选择关闭对话框操作。

或者,您可以在客户端脚本中编写代码:

app.closeDialog();
    

CSS 属性

使用以下 CSS 类可自定义应用中的对话框属性:

  • .app-Dialog:应用于对话框顶层元素。
  • .app-DialogGlass:应用于 glass 元素,该元素可在对话框打开时覆盖界面的其余部分。
  • .app-DialogBody:应用于对话框的内容。

对话框大小

对话框大小由页面或页面片段的尺寸决定。

如需更改对话框的尺寸,请点击页面或页面片段,然后在“属性编辑器”中修改尺寸。