Electron Dialog 是 Electron 应用程序中的一个重要组件,它可以帮助开发者创建和显示各种对话框,以便与用户进行交互。它是一个轻量级的 JavaScript 库,可以在 Electron 应用中使用,并且提供了一系列的 API 来帮助开发者创建和显示各种对话框。
Electron Dialog 提供了多种不同的对话框,包括警告、错误、信息、文件选择、文本输入、进度条和其他多种对话框。它还可以让开发者自定义对话框的样式和内容,并根据需要显示不同的回调函数。
// 使用 electron dialog 显示一个信息对话框 const { dialog } = require('electron') dialog.showMessageBox({ type: 'info', // 对话框的类型(info, error, warning 等) title: 'Hello World', // 对话框标题 message: 'This is a message box' // 对话框内容 })
dialog
模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验.
对话框例子,展示了选择文件和目录:
var win = ...; // BrowserWindow in which to show the dialog
const dialog = require("electron").dialog;
console.log(dialog.showOpenDialog({ properties: [ "openFile", "openDirectory", "multiSelections" ]}));
OS X 上的注意事项: 如果你想像sheets一样展示对话框,只需要在browserWindow
参数中提供一个 BrowserWindow
的引用对象.
dialog
模块有以下方法:
dialog.showOpenDialog([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (可选)options
Objecttitle
StringdefaultPath
Stringfilters
Arrayproperties
Array - 包含了对话框的特性值, 可以包含 openFile
, openDirectory
, multiSelections
and createDirectory
callback
Function (可选)成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined
.
filters
当需要限定用户的行为的时候,指定一个文件数组给用户展示或选择. 例如:
{
filters: [
{ name: "Images", extensions: ["jpg", "png", "gif"] },
{ name: "Movies", extensions: ["mkv", "avi", "mp4"] },
{ name: "Custom File Type", extensions: ["as"] },
{ name: "All Files", extensions: ["*"] }
]
}
extensions
数组应当只包含扩展名,不应该包含通配符或"."号 (例如 "png"
正确,但是 ".png"
和 "*.png"
不正确). 展示全部文件的话, 使用 "*"
通配符 (不支持其他通配符).
如果 callback
被调用, 将异步调用 API ,并且结果将用过 callback(filenames)
展示.
注意: 在 Windows 和 Linux ,一个打开的 dialog 不能既是文件选择框又是目录选择框, 所以如果在这些平台上设置 properties
的值为 ["openFile", "openDirectory"]
, 将展示一个目录选择框.
dialog.showSaveDialog([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (可选)options
Objecttitle
StringdefaultPath
Stringfilters
Arraycallback
Function (可选)成功使用这个方法的话,就返回一个可供用户选择的文件路径数组,失败返回 undefined
.
filters
指定展示一个文件类型数组, 例子 dialog.showOpenDialog
.
如果 callback
被调用, 将异步调用 API ,并且结果将用过 callback(filenames)
展示.
dialog.showMessageBox([browserWindow, ]options[, callback])
browserWindow
BrowserWindow (可选)options
Objecttype
String - 可以是 "none"
, "info"
, "error"
, "question"
或 "warning"
. 在 Windows, "question" 与 "info" 展示图标相同, 除非你使用 "icon" 参数.buttons
Array - buttons 内容,数组.defaultId
Integer - 在message box 对话框打开的时候,设置默认button选中,值为在 buttons 数组中的button索引.title
String - message box 的标题,一些平台不显示.message
String - message box 内容.detail
String - 额外信息.icon
NativeImagecancelId
Integer - 当用户关闭对话框的时候,不是通过点击对话框的button,就返回值.默认值为对应 "cancel" 或 "no" 标签button 的索引值, 或者如果没有这种button,就返回0. 在 OS X 和 Windows 上, "Cancel" button 的索引值将一直是 cancelId
, 不管之前是不是特别指出的.noLink
Boolean - 在 Windows ,Electron 将尝试识别哪个button 是普通 button (如 "Cancel" 或 "Yes"), 然后再对话框中以链接命令(command links)方式展现其它的 button . 这能让对话框展示得很炫酷.如果你不喜欢这种效果,你可以设置 noLink
为 true
.callback
Function展示 message box, 它会阻塞进程,直到 message box 关闭为止.返回点击按钮的索引值.
如果 callback
被调用, 将异步调用 API ,并且结果将用过 callback(response)
展示.
dialog.showErrorBox(title, content)
展示一个传统的包含错误信息的对话框.
在 app
模块触发 ready
事件之前,这个 api 可以被安全调用,通常它被用来在启动的早期阶段报告错误. 在 Linux 上,如果在 app
模块触发 ready
事件之前调用,message 将会被触发显示stderr,并且没有实际GUI 框显示.
Electron 应用打包为舒缓 Windows 下路径名过长的问题,也略对require加速以及简单隐匿你的源代码,你可以通过极小的源代码改动...
在安卓设备上使用 Chrome 远程调试功能你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功...
任何数据分析和可视化工作都涉及使用广泛的数据过滤。Tableau有很多种过滤选项来满足这些需求。有许多内置函数用于对使用维度和...
grunt.task注册、执行和加载外部任务。参见task lib source和task util lib source获取更多信息。The task API当一个任务正在执...
介绍ToggleButtonBar控件提供了一组水平或垂直按钮,以保持其选定或取消选择的状态。类声明以下是 mx.controls.ToggleButtonBar ...
介绍WipeRight类定义了一个擦除权效果。 组件的前或后状态必须是不可见的。类声明以下是 mx.effects.WipeRight 类的声明:public ...
Kubernetes连接容器的模型既然有了一个持续运行、可复制的应用,我们就能够将它暴露到网络上。Kubernetes假设Pod可与其它Pod通信...
资源配额当多个用户或团队共享具有固定节点数目的集群时,人们会担心有人使用超过其基于公平原则所分配到的资源量。资源配额是帮...