Dialog
Questi contenuti non sono ancora disponibili nella tua lingua.
Native system dialogs for opening and saving files along with message dialogs.
Setup
Install the dialog plugin to get started.
Use your project’s package manager to add the dependency:
npm run tauri add dialog
yarn run tauri add dialog
pnpm tauri add dialog
bun tauri add dialog
cargo tauri add dialog
-
Run
cargo add tauri-plugin-dialog
to add the plugin to the project’s dependencies inCargo.toml
. -
Modify
lib.rs
to initialize the plugin:lib.rs #[cfg_attr(mobile, tauri::mobile_entry_point)]pub fn run() {tauri::Builder::default()// Initialize the plugin.plugin(tauri_plugin_dialog::init()).run(tauri::generate_context!()).expect("error while running tauri application");} -
If you’d like create dialogs in JavaScript, install the npm package as well:
npm install @tauri-apps/plugin-dialogyarn add @tauri-apps/plugin-dialogpnpm add @tauri-apps/plugin-dialogbun add @tauri-apps/plugin-dialog
Usage
The dialog plugin is available in both JavaScript and Rust. Here’s how you can use it:
in JavaScript:
- Create Yes/No Dialog
- Create Ok/Cancel Dialog
- Create Message Dialog
- Open a File Selector Dialog
- Save to File Dialog
in Rust:
JavaScript
See all Dialog Options at the JavaScript API reference.
Create Yes/No Dialog
Shows a question dialog with Yes
and No
buttons.
import { ask } from '@tauri-apps/plugin-dialog';// when using `"withGlobalTauri": true`, you may use// const { ask } = window.__TAURI_PLUGIN_DIALOG__;
// Create a Yes/No dialogconst answer = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning',});
console.log(answer);// Prints boolean to the console
Create Ok/Cancel Dialog
Shows a question dialog with Ok
and Cancel
buttons.
import { confirm } from '@tauri-apps/plugin-dialog';// when using `"withGlobalTauri": true`, you may use// const { confirm } = window.__TAURI_PLUGIN_DIALOG__;
// Creates a confirmation Ok/Cancel dialogconst confirmation = await confirm( 'This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning' });
console.log(confirmation);// Prints boolean to the console
Create Message Dialog
Shows a message dialog with an Ok
button. Keep in mind that if the user closes the dialog it will return false
.
import { message } from '@tauri-apps/plugin-dialog';// when using `"withGlobalTauri": true`, you may use// const { message } = window.__TAURI_PLUGIN_DIALOG__;
// Shows messageawait message('File not found', { title: 'Tauri', kind: 'error' });
Open a File Selector Dialog
Open a file/directory selection dialog.
The multiple
option controls whether the dialog allows multiple selection or not, while the directory
, whether is a directory selection or not.
import { open } from '@tauri-apps/plugin-dialog';// when using `"withGlobalTauri": true`, you may use// const { open } = window.__TAURI_PLUGIN_DIALOG__;
// Open a dialogconst file = await open({ multiple: false, directory: false,});console.log(file);// Prints file path and name to the console
Save to File Dialog
Open a file/directory save dialog.
import { save } from '@tauri-apps/plugin-dialog';// when using `"withGlobalTauri": true`, you may use// const { save } = window.__TAURI_PLUGIN_DIALOG__;
// Prompt to save a 'My Filter' with extension .png or .jpegconst path = await save({ filters: [ { name: 'My Filter', extensions: ['png', 'jpeg'], }, ],});console.log(path);// Prints the chosen path
Rust
Refer to the Rust API reference to see all available options.
Build an Ask Dialog
Shows a question dialog with Absolutely
and Totally
buttons.
use tauri_plugin_dialog::DialogExt;
let answer = app.dialog() .message("Tauri is Awesome") .title("Tauri is Awesome") .ok_button_label("Absolutely") .cancel_button_label("Totally") .blocking_show();
If you need a non blocking operation you can use show()
instead:
use tauri_plugin_dialog::DialogExt;
app.dialog() .message("Tauri is Awesome") .title("Tauri is Awesome") .ok_button_label("Absolutely") .cancel_button_label("Totally") .show(|result| match result { true => // do something, false =>// do something, });
Build a Message Dialog
Shows a message dialog with an Ok
button. Keep in mind that if the user closes the dialog it will return false
.
use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
let ans = app.dialog() .message("File not found") .kind(MessageDialogKind::Error) .title("Warning") .blocking_show();
If you need a non blocking operation you can use show()
instead:
use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
app.dialog() .message("Tauri is Awesome") .kind(MessageDialogKind::Info) .title("Information") .ok_button_label("Absolutely") .show(|result| match result { true => // do something, false => // do something, });
Build a File Selector Dialog
Pick Files
use tauri_plugin_dialog::DialogExt;
let file_path = app.dialog().file().blocking_pick_file();// return a file_path `Option`, or `None` if the user closes the dialog
If you need a non blocking operation you can use pick_file()
instead:
use tauri_plugin_dialog::DialogExt;
app.dialog().file().pick_file(|file_path| { // return a file_path `Option`, or `None` if the user closes the dialog })
Save Files
use tauri_plugin_dialog::DialogExt;
let file_path = app .dialog() .file() .add_filter("My Filter", &["png", "jpeg"]) .blocking_save_file(); // do something with the optional file path here // the file path is `None` if the user closed the dialog
or, alternatively:
use tauri_plugin_dialog::DialogExt;
app.dialog() .file() .add_filter("My Filter", &["png", "jpeg"]) .pick_file(|file_path| { // return a file_path `Option`, or `None` if the user closes the dialog });
© 2024 Tauri Contributors. CC-BY / MIT